在 jspdf 页面之外使用 htm2canvas 在 Angular 中导出 PDF 问题

Question

     <div id="content" #content>
    <div class="skill-view-head">
                <div>
                  <label for="emp-id">Emp ID: </label>
                  <span> {{employeeId}}</span>
                </div>
                <div>
                  <label for="emp-name">Emp Name: </label>
                  <span> {{empName}}</span>
                </div>
                <div>
                  <label for="doj">DOJ: </label>
                  <span> {{doj | date:'MM/dd/yyyy'}}</span>
                </div>
              </div>
    <table class="skill-view-table certificate-table">
              <tr>
                <th>#</th>
                <th>Date</th>
                <th>Attributes</th>
                <th>Certificate Name</th>
              </tr>
              <tr *ngFor="let certificate of skillBonusdetails[0]?.getCertificatesTemp; let i = index">
                <td>{{ i + 1 }}</td>
                <td>{{ certificate.date | date:'MM/dd/yyyy' }}</td>
                <td>{{ certificate.type }}</td>
                <td>{{ certificate.certificateName }}</td>
              </tr>
              <tr *ngIf="skillBonusdetails[0]?.getCertificatesTemp?.length > 0" style="background-color: #fff;">
                <td colspan="3">Earned Points</td>
                <td>{{certificateEarnedPoints}}</td>
              </tr>
              <tr *ngIf="skillBonusdetails[0]?.getCertificatesTemp === null">
                <td colspan="4" class="text-center">No records available</td>
              </tr>
            </table>
    <div>
     <button (click)="onExportPdf(this.empName)" class="border-0 green-btn hide-export-btn">Export To PDF</button>

onExportPdf(EmpName) {
    this.loaderservice.display(true);
    const doc = new jsPDF('p', 'pt', 'A4');
    const source = document.getElementById('content');
    const button = document.querySelector('.hide-export-btn') as HTMLElement;
    const button2 = document.querySelector('.hide-export-btn2') as HTMLElement;
    const button3 = document.querySelector('.hide-export-btn3') as HTMLElement;
    source.style.width = '800px';
    doc.setFontSize(8);
    doc.html(source, {
      callback: function (pdf) {
        //doc.output('dataurlnewwindow');
        doc.save(EmpName + ' Points Details.pdf');
        
      },
      html2canvas: {
        scale: 0.7
      }
    });
    this.loaderservice.display(false);
  }

我有这段代码可以将表格内容导出为 pdf 格式，效果很好，但这只是一个问题，当我们导出 pdf 时，页脚中的某些内容会在第一页和最后一页之间中断。请参阅附图突出显示两个 pdf 页面之间的问题，您能否建议如何解决此问题。

Answer 1

您可以使用包含信息的数组，而不是将 html 导出为 PDF。

import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';


onExportPdf(EmpName: string) {
const doc = new jsPDF('p', 'pt', 'A4');

// Add table
autoTable(doc, {
  head: headers,
  body: this.skillBonusdetails[0]?.getCertificatesTemp,
  startY: 48,
  showHead: 'firstPage',
  theme: 'striped',
  didDrawPage: (data) => {
    // Add page number
    const pageCount  = doc.getNumberOfPages();
    const pageSize   = doc.internal.pageSize;
    const pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
    doc.setFontSize(10);
    doc.text(`Page ${pageCount}`, data.settings.margin.left, pageHeight - 10);
  }
});

// Save the PDF
doc.save(EmpName + ' Points Details.pdf');

}