如何在 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(){

  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 2

要在 Angular13+ 中使用您的代码，您必须添加 2 行代码，否则会出现 Type 'null' is not allocateable to type 'HTMLElement' 错误：

您可以使用：

  sendToPdf() {

    let data = document.getElementById('test');

    // let data = document.getElementById("maindiv");

    console.log(data);

    if (data != null) {

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

      });

    }

  }