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

Question

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

我的代码应用程序链接 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(){&nbsp; let data = document.getElementById("test");&nbsp;&nbsp; &nbsp; // let data = document.getElementById("maindiv");&nbsp; &nbsp; console.log(data);&nbsp;&nbsp;&nbsp; &nbsp; html2canvas(data).then(canvas => {&nbsp; &nbsp; &nbsp; const contentDataURL = canvas.toDataURL('image/jpeg', 1.0)&nbsp; &nbsp; &nbsp; console.log(contentDataURL);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; let pdf = new jspdf('l', 'cm', 'a4'); //Generates PDF in landscape mode&nbsp; &nbsp; &nbsp; // let pdf = new jspdf('p', 'cm', 'a4'); //Generates PDF in portrait mode&nbsp; &nbsp; &nbsp; pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; pdf.save('Filename.pdf');&nbsp; &nbsp;&nbsp; &nbsp; });&nbsp;}

Answer 2

要在 Angular13+ 中使用您的代码，您必须添加 2 行代码，否则会出现 Type 'null' is not allocateable to type 'HTMLElement' 错误：您可以使用：&nbsp; sendToPdf() {&nbsp; &nbsp; let data = document.getElementById('test');&nbsp; &nbsp; // let data = document.getElementById("maindiv");&nbsp; &nbsp; console.log(data);&nbsp; &nbsp; if (data != null) {&nbsp; &nbsp; &nbsp; html2canvas(data).then((canvas) => {&nbsp; &nbsp; &nbsp; &nbsp; const contentDataURL = canvas.toDataURL('image/jpeg', 1.0);&nbsp; &nbsp; &nbsp; &nbsp; console.log(contentDataURL);&nbsp; &nbsp; &nbsp; &nbsp; let pdf = new jsPDF('l', 'cm', 'a4'); //Generates PDF in landscape mode&nbsp; &nbsp; &nbsp; &nbsp; // let pdf = new jspdf('p', 'cm', 'a4'); //Generates PDF in portrait mode&nbsp; &nbsp; &nbsp; &nbsp; pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);&nbsp; &nbsp; &nbsp; &nbsp; pdf.save('Filename.pdf');&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }