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

【问题标题】：How to convert HTML content to PDF in Angular如何在 Angular 中将 HTML 内容转换为 PDF
【发布时间】：2020-12-08 14:36:19
【问题描述】：

我正在尝试从 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');   
    }); 
}

【问题讨论】：

请检查：therichpost.com/how-to-convert-html-into-pdf-in-angular-10

标签： javascript angular jspdf html2canvas

【解决方案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');   
    }); 
}

【讨论】：