Проблема при конвертации HTML в PDF в Angular - PullRequest
0 голосов
/ 07 июля 2019

Я пытаюсь напечатать таблицу HTML с 10 записями в Angular 7, для этого я использую библиотеку jsPDF и html2canva, проблема в том, что она показывает только 5 записей, я не знаю, в чем причинапотому что я должен печатать всю таблицу.

Я показываю вам скриншот представления записей моей таблицы:

enter image description here

однако я заметил, что только записи, которые появляются на странице, печатаются без использования прокрутки:

enter image description here

представление созданного файла PDF:

enter image description here

А теперь я покажу вам свой код, начиная с 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.

enter image description here

Надеюсь, вы поможете мне распечатать 10 записей из моей таблицы в файле PDF.Заранее большое спасибо.

...