Question

我试图在Angular 7中打印包含10条记录的HTML表，因为我使用的是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中不会显示任何内容。

希望您能帮我从PDF文件的表格中打印10条记录。预先非常感谢。

在Angular中将HTML转换为PDF的问题

0 个答案: