如何使用角度为7.2的jsPDF将动态数据的组件html导出为PDF文件？

Question

I have jsPDF, html2canvas installed and imported those libraries ina component.

On clicking a button, it triggers to a function which is supposed to export a html file to a PDF file. But it is not working.

Also, how can I use jsPDF to load an html file with dynamic data that I get from an API and download it into a PDF file?

Here are the codes: - jspdf.component.html

<div id="content" #content>

<div class="alert alert-info">
<strong>Html To PDF Conversion - Angular 7.2</strong>
</div>
<div>
<input type="button" value="CPTURE" (click)="captureScreen()"/> 
</div>
</div>
<div class="text-danger" id="contentToConvert">hi everyone</div>

• jspdf.component.ts

   import * as jspdf from 'jspdf'; import html2canvas from 'html2canvas'; public captureScreen() { var data = document.getElementById('contentToConvert'); html2canvas(data).then(canvas => { // Few necessary setting options 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'); // A4 size page of PDF var position = 0; pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight) pdf.save('MYPdf.pdf'); // Generated PDF }); } 

• On clicking Capture Screen button, the console shows the error core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]' TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]'

Answer 1

Try like this:

captureScreen() {

  var doc = new jsPDF();

  var content = document.getElementById('contentToConvert')

  html2canvas(content).then(canvas => {

    doc.addImage(canvas.toDataURL("image/png"), 'PNG', 15, 40, 180, 110);
    doc.save(`MYPdf.pdf`);

  });

}