如何在 Angular 中将 HTML 内容转换为 PDF

Question

我正在尝试从 HTML 内容生成 PDF 文件。 contentDataURL 具有空图像数据。我也尝试更改 HTML 内容，但生成了相同的空图像。我的 canvas.toDataURL() 实施有什么问题？ PDF 文件生成工作正常。

我的代码应用link https://stackblitz.com/edit/angular-ivy-1aug8i

<div class="test" id="test">
     <button (click)="sendToPdf()"> 
         testpdf</button> </div>
         <div class="abc" id="testdivid">
            <table style="width:100%">
                <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Age</th>
                </tr>
                <tr>
                  <td>Jill</td>
                  <td>Smith</td>
                  <td>50</td>
                </tr>
                <tr>
                  <td>Eve</td>
                  <td>Jackson</td>
                  <td>94</td>
                </tr>
              </table>
         </div>

import html2canvas from 'html2canvas';
import jspdf from 'jspdf';


sendToPdf(){
  let data = document.getElementById("test"); 
    // let data = document.getElementById("maindiv");
    console.log(data);  
    html2canvas(data).then(canvas => {
      const contentDataURL = canvas.toDataURL('image/jpeg', 1.0)
      console.log(contentDataURL);  
      let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode
      // let pdf = new jspdf('p', 'cm', 'a4'); //Generates PDF in portrait mode
      pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);  
      pdf.save('Filename.pdf');   
    }); 
}

Answer 1

重新安装 html2canvas 后工作正常

import html2canvas from 'html2canvas';
import jspdf from 'jspdf';


sendToPdf(){
  let data = document.getElementById("test"); 
    // let data = document.getElementById("maindiv");
    console.log(data);  
    html2canvas(data).then(canvas => {
      const contentDataURL = canvas.toDataURL('image/jpeg', 1.0)
      console.log(contentDataURL);  
      let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode
      // let pdf = new jspdf('p', 'cm', 'a4'); //Generates PDF in portrait mode
      pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);  
      pdf.save('Filename.pdf');   
    }); 
}

如何在 Angular 中将 HTML 内容转换为 PDF

How to convert HTML content to PDF in Angular

javascript

html2canvas

jspdf

angular