如何使用Angular 7生成PDF？

Question

我必须根据用户输入的数据生成PDF报告，并将其保存在对象中。到目前为止，我遇到了一些东西，这些东西会生成一个HTML页面，然后获取一个屏幕截图并将其转换为PDF。我希望直接从存储在对象中的数据生成PDF。有任何想法吗？

Answer 1

您可以使用jspdf。

工作演示

.html

<div id="pdfTable" #pdfTable>
  <h1>{{name}}</h1>

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
   </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</div>

<div> <button  (click)="downloadAsPDF()">Export To PDF</button></div>

.ts

  public downloadAsPDF() {
    const doc = new jsPDF();

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const pdfTable = this.pdfTable.nativeElement;

    doc.fromHTML(pdfTable.innerHTML, 15, 15, {
      width: 190,
      'elementHandlers': specialElementHandlers
    });

    doc.save('tableToPdf.pdf');
  }

Answer 2

您需要在 DIV 中显示要打印的内容。显示内容后，使用以下用于我的项目的代码

第1步 ：

运行以下命令安装 npm 包

> npm install jspdf
> npm install html2canvas

第2步：

在 app.components.ts 中导入已安装的包。我没有在构造函数（）中导入这些包

> import * as jspdf from 'jspdf';
> import html2canvas from 'html2canvas';

第 3 步：

为必须导出为 PDF 的 HTML div 提供一个 id。添加一个按钮来激活该功能。

<div id="MyDIv" style="margin-left: 45px;" class="main-container">
        
</div>
<div class="icon_image " title="Share As PDF" (click)="exportAsPDF('MyDIv');"><img src="assets/img/pdf.png"></div>

第四步 ：

调用生成PDF的代码如下

    exportAsPDF(divId)
    {
        let data = document.getElementById('divId');  
        html2canvas(data).then(canvas => {
        const contentDataURL = canvas.toDataURL('image/png')  
        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 3

这是一个常见的要求，但您没有提供有关 PDF 特定要求的详细信息。你可以看看：

https://www.npmjs.com/package/angular-pdf-generator

或者

https://parall.ax/products/jspdf

作为客户端选项。还有其他选项取决于您可能想要对生成的 PDF 做什么。例如，将数据发送回您的服务器（如果您有服务器）以生成 PDF 并将其存储在数据库等中可能更有意义。

希望有帮助。

Answer 4

用户输入的数据可以显示在HTML页面中，并且可以转换为pdf。否则，如果您想在 HTML 模板中绑定对象，请使用handlebars。然后可以使用jspdf和html2canvas将HTML模板转换为角度2/4/6/7的PDF。HTML内容应按如下方式处理。此代码支持多页 pdf 创建。

这里的数据--> htmlcontent

服务：

generatePdf(data) {
     html2canvas(data, { allowTaint: true }).then(canvas => {
      let HTML_Width = canvas.width;
      let HTML_Height = canvas.height;
      let top_left_margin = 15;
      let PDF_Width = HTML_Width + (top_left_margin * 2);
      let PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
      let canvas_image_width = HTML_Width;
      let canvas_image_height = HTML_Height;
      let totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
      canvas.getContext('2d');
      let imgData = canvas.toDataURL("image/jpeg", 1.0);
      let pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
      pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
      for (let i = 1; i <= totalPDFPages; i++) {
        pdf.addPage([PDF_Width, PDF_Height], 'p');
        pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
      }
       pdf.save("HTML-Document.pdf");
    });
  }

HTML：

<div #contentToConvert> Some content here </div>

<button (click)="generatePdf(contentToConvert)">Generate PDF</button>

Answer 5

以前的答案对我不起作用。然后我创立了这个解决方案。使用角度 9 进行测试。

jspdf 版本“^2.3.0”

npm install jspdf --save
npm install @types/jspdf --save-dev

1. 在 component.html 文件中创建表。<table class="table" id="content" #content></table>

2. 捕获 component.ts 文件中的表。@ViewChild('content') content: ElementRef;

savePdf() {
    const doc = new jsPDF();

    const pdfTable = this.content.nativeElement;

    doc.html(pdfTable.innerHTML, {
      callback(rst) {
        rst.save('one.pdf');
      },
      x: 10,
      y: 10
    });

  }

尝试这个解决方案。