Как я могу использовать jsPDF с угловой версией 7.2 для экспорта html-компонента динамических данных в файл PDF? - PullRequest
Новая
       16

Как я могу использовать jsPDF с угловой версией 7.2 для экспорта html-компонента динамических данных в файл PDF?

0 голосов
/ 04 июня 2019

Я установил jsPDF, html2canvas и импортировал эти библиотеки в компонент.

При нажатии кнопки запускается функция, которая должна экспортировать HTML-файл в PDF-файл.Но это не работает.

Кроме того, как я могу использовать jsPDF для загрузки HTML-файла с динамическими данными, полученными из API, и загрузки его в файл PDF?

Воткоды: - 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   
});
}

  • При нажатии кнопки «Снять экран» кнопкаконсоль показывает ошибку 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]'

1 Ответ

0 голосов
/ 04 июня 2019

Попробуй так: 

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`);

  });

}
...