Estoy realizando un proyecto en el que tengo que desplegar una tabla que estoy iterando desde unas etiquetas <div>
, al aplicar las librerías de JSPDF sin los <div>
la salida del documento resulta exitosa, muestra todo su contenido.
Pero con las divisiones que se necesitan para recorrer el array traído de la base de datos, solo muestra el footer y el header del pdf mas el contenido de la tabla no se puede observar, anexo documentación y capturas de pantalla de lo sucedido para poderlos contextualizar mejor.
function HTMLtoPDF(){
var pdf = new jsPDF('p', 'pt', 'letter');
const url = '../pdf.php';
source = $('#HTMLtoPDF')[0];
specialElementHandlers = {
'#bypassme': function(element, renderer){
return true
}
}
margins = {
top: 0,
left: 55,
width: 545
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Reporte de Actividades.pdf');
}
)
}
// Inicio de la seccion Main-tittle
#MainTittle h1{
text-align: center;
text-shadow: #666666;
font-weight: bolder;
font-family: 'Times New Roman', Times, serif;
margin-bottom: 50px;
margin-top: 20px;
float: left;
margin-left: 10%;
}
#MainTittle dfn {
float: left;
margin-left: 15%;
padding-bottom: 95px;
}
// Fin de laseccion Main-tittle
.button {
border : 2px solid #000; /* 2 pixeles de borde negro */
text-align : center; /* Texto centrado */
text-decoration : none; /* Sin decoraciones para el texto (por defecto viene con underline) */
padding : 10px; /* Un poco de padding para que se vea bien el botón */
/* La transición en el click (:active) tiene que ser rápida 150ms (transform y color), la transición para cambiar de foco en 150ms */
transition : transform 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
color : #FFF; /* Color del texto en blanco */
margin : 10px; /* 10 pixeles de margen para separar los botones entre si. */
position : relative; /* Posición relativa para que sus hijos partan desde él */
overflow : hidden; /* Todo lo que sobresalga del botón no se verá */
cursor : pointer; /* Puntero del mouse que muestre una mano */
transform : perspective(600px) translateZ(0px) rotateZ(0deg) rotateX(0deg); /* Perspectiva, rotación y posición por defecto */
text-shadow : 1px 1px 1px #666; /* Una ligera sombra gris para el texto */
background-color :#336886;
width :200px; /* Asigna un tamaño general para los botones*/
}
.button:focus {
outline : 0px solid transparent; /* Elimino el outline que viene por defecto en los button */
box-shadow : 0px 0px 4px 2px #64bf9c, 0px 0px 2px 1px #64bf9c; /* Creo uan sombra en gris oscuro con 2 tonalidades */
}
.button:active {
transform : perspective(600px) translateZ(-75px) rotateZ(-0.5deg) rotateX(-10deg); /* Creo el efecto de hundimiento para el botón */
color : #BBB; /* Cambio el color del texto a gris */
}
[class^='button']:hover, [class^='button']:active { border : 2px solid #64bf9c; }
// fin del modulo de la botonera principal
// inicio de la pestaña descriptiva (tab0) en la que se indica alusuario seleccionar una pestaña
#tab0{
text-align: center;
}
// fin de la pestaña descriptiva (tab0)
// inicio de la configuracion de los modulos
.modulos{
}
// fin de la configuracion de los modulos
// Inicio del contenedor del pdf
.card-body{
background-color: #a0a0a0;
border-radius: 25px;
page-break-after: always;
}
.card-body td, thead{
border-style: solid;
border-color: #000;
}
// fin del Contenedor del pdf
// inicio boton descargar
#btn-descargar{
margin-top: 15%;
width: 15%;
height: 50px;
background-color: #747373;
margin-left: 40%;
}
#btn-descargar:hover{
text-decoration-line: underline;
transform : perspective(600px) translateZ(-75px) rotateZ(-0.5deg) rotateX(-10deg); /* Creo el efecto de hundimiento para el botón */
}
// fin boton descargar
// inicio de imagenes institucionales
#descripcion {
opacity: 0;
position: fixed; top: 0%;
}
#p1 {
margin-top: 5%;
margin-bottom: 0%;
}
.imagen{
margin-top: 0%;
margin-bottom: 5%;
margin-left: 0%;
}
footer{
opacity: 0;
}
// fin de imagenes institucionales
// Inicio animacion de las barras de progreso de actividades
.active{
animation: progress-bar-stripes 2s linear infinite;
background-color:#cc9a03;
font: bolder;
}
// Fin animacion de las barras de progreso de actividades
// inicio de medidas de la tabla del documento PDF
.enunciado{
}
// Fin de medidas de la tabla del documento PDF
// Inicio de medidas de las columnas y filas de la tabla
td{
width: 352px;
text-align: justify;
}
th{
padding: 1%;
margin: 1%;
width: 352px;
text-align: center;
border-style: solid;
border-color: #000;
}
// Fin de medidas de las columnas y filas de la tabla
<div id="HTMLtoPDF" >
<header>
<div id="descripcion">
<img class="imagen" src="../../../assets/images/header.png" alt="">
<p id="p1">
Documento generado por el sistema.
</p>
<p id="p2">En el encontrará el informe que indica el progreso de las actividades docentes.</p>
</div>
</header>
<!-- LISTA DE REPORTE DE ACTIVIDADES -->
<div class="card-body table-responsive" >
<table class="table table-bordered table-hover table-striped " style="border-color:black;">
<thead>
<tr>
<div >
<th class="C-Enunciado">Actividades Y Sugerencias</th>
<th class="C-Modulo" >Modulo de la actividad</th>
<th class="C-Progreso" >Progreso % </th>
</div>
</tr>
</thead>
<tbody >
<tr>
<div *ngFor="let pregunta of preguntas">
<div *ngFor="let actividad of actividades">
<div *ngIf="pregunta.id == actividad.fk_id_pregunta" >
<td>
{{pregunta.enunciado}}
</td>
<td >
<div *ngFor=" let modulo of modulos">
<div *ngIf="modulo.id == actividad.fk_id_modulo" >
{{modulo.nombre}}
</div>
</div>
</td>
<td >
<div class="container-fluid">
<br>
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" [style.width]="porcentaje">
{{porcentaje}}
</div>
</div>
</td>
</div>
</div>
</div>
</tr>
</tbody>
</table>
</div>
<footer>
<img src="../../../assets/images/footer.png" >
</footer>
</div>
<button class="btn btn-secondary" class="button" onclick="HTMLtoPDF()">descargar PDF</button>