Я пытаюсь напечатать таблицу HTML с 10 записями в Angular 7, для этого я использую библиотеку jsPDF и html2canva, проблема в том, что она показывает только 5 записей, я не знаю, в чем причинапотому что я должен печатать всю таблицу.
Я показываю вам скриншот представления записей моей таблицы:
однако я заметил, что только записи, которые появляются на странице, печатаются без использования прокрутки:
представление созданного файла PDF:
А теперь я покажу вам свой код, начиная с HTML:
<div id="idTabla" style="overflow-x:auto;padding-left: 30px;">
<table border="1" class="w3-table-all w3-hoverable">
<tr style="background-color: rgba(0, 0, 0, 0.842); color: white;">
<th class="w3-center">ID Viaje</th>
<th class="w3-center">Cliente</th>
<th class="w3-center">Descripción del paquete</th>
<th class="w3-center">Costo total en $MXN</th>
<th class="w3-center">Fecha de registro</th>
<th class="w3-center">Acciones</th>
</tr>
<tbody *ngFor="let i of arregloViajes | filter:term | paginate: { itemsPerPage: 10, currentPage: paginaActual }; let i = index">
<tr style="background-color: rgba(0, 0, 0, 0.726); color: white;">
<td>
{{i.id_viaje}}
</td>
<td>
{{i.cliente}}
</td>
<td>
{{i.descripcion_paquete}}
</td>
<td>
{{i.costo_total}}
</td>
<td>
{{i.fecha_registro}}
</td>
<td class="w3-center">
<button id="idAsignar" class="btnTabla1" (click)="asignar(i.cliente)"><i class="fa fa-check"></i></button>
<button id="idAsignar" class="btnTabla2" (click)="cancelar(i.cliente)"><i class="fa fa-times"></i></button>
<button id="idAsignar" class="btnTabla3" (click)="editar(i.cliente)"><i class="fas fa-edit"></i></button>
</td>
</tr>
</tbody>
</table>
<br>
</div>
Теперь я покажу вам код в.Файл TS (я буду размещать только импортированные библиотеки и метод):
import * as jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
public generarPDF(){
var data = document.getElementById('idTabla');
html2canvas(data).then(canvas => {
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth/canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jsPDF('p', 'mm', 'a4');
var position = -80;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('viajesProgramados-PDF.pdf');
}
, если я передам значение переменной 0, он ничего не отобразит в .pdf.
Надеюсь, вы поможете мне распечатать 10 записей из моей таблицы в файле PDF.Заранее большое спасибо.