html - 如何在jsPDF插件中渲染动态数据和css以将html转换为pdf

Question

您好我正在使用 jsPDF 从 HTML 生成 pdf，但 css 和动态数据未在 pdf 中呈现。这是我的代码：-

import jsPDF from 'jspdf';

public downloadAsPDF(): void {
const doc: any = new jsPDF();
const specialElementHandlers: {} = {
  '#editor': function(element: any, renderer: any): boolean {
    return true;
  }
};
const pdfTable: any = document.getElementById('pdfContent');
doc.fromHTML(pdfTable.innerHTML, 0, 0, {
  elementHandlers : specialElementHandlers
});
doc.save('tableToPdf.pdf');

}

.html 文件：

<ion-card claidss="pdfContent" #pdfContent  *ngFor="let report of reports">
 <ion-card-header>
    <ion-card-title>{{report.name }}</ion-card-title>
 </ion-card-header>
 <ion-card-content>
    <ion-row class="table-header-name table-header-row">
       <ion-col class="header-column" size="3">
          <ion-label class="title-text">Name</ion-label>
       </ion-col>
    </ion-row>
    <ion-row class="table-content-row" *ngFor="let winner of winners">
       <ion-col class="header-column" size="3">
          <ion-label class="title-text">{{winner.Name}}</ion-label>
       </ion-col>           <ion-col class="header-column" size="3">
          <ion-label class="title-text">{{winner.statusDate ? winner.statusDate: 'Not Available'}}</ion-label>
       </ion-col>
     </ion-row>
 </ion-card-content>

标签： htmlangulartypescriptionic-frameworkjspdf