Question

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

Answer 1

您可以将HTML下载到Pdf，希望这会有所帮助..！

Answer 2

以前的答案对我不起作用。然后我建立了这个解决方案。用 angular 9 测试。

jspdf 版本“^2.3.0”

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

在 component.html 文件中创建表格。 <table class="table" id="content" #content></table>
在 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
    });

  }

试试这个解决方案。

Answer 3

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

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

或

https://parall.ax/products/jspdf

作为客户端选项。还有其他选项，具体取决于生成后可能要处理的PDF。例如，将数据发送回服务器（如果有的话）以生成PDF并将其存储在数据库中可能更有意义。

希望有帮助。

Answer 4

以下是可用工具和技术的良好概述：Modern html to pdf conversion 2019 还有一个使用jspdf和html2canvas的工作示例：here

Answer 5

您可以使用PDFMAKE插件进行打印。您可以使用此链接https://www.npmjs.com/package/ng-pdf-make在Git上访问它。安装非常简单之后，只需导入，将这些库添加到将打印的组件中即可：

以* pdf格式导入*来自“ pdfmake / build / pdfmake”；

从“ pdfmake / build / vfs_fonts”中以pdfFonts格式导入*；

After that, create a function that will print your document such as:

            printDoc(){

            pdfMake.vfs = pdfFonts.pdfMake.vfs;
             let dd = {

// Here you put the page settings as your footer, for example:
                      footer: function(currentPage, pageCount) {
                          return [
                            {
                              text:
                                currentPage.toString() +
                                " de " +
                                pageCount +
                                "\n" +
                                "Footer Name",
                              alignment: currentPage ? "center" : "center"
                            }
                          ];
                        },
// Here you can enter the page size and orientation:
                pageSize: "A4",
                pageOrientation: "Portrait",
            //in pageOrientation you can put "Portrait" or "landscape"

// start the body of your impression:
        content: [

                     {
                        table: {
                          widths: ["*"],
                          body: [
                            [
                              {
                                text: [
                                  { text: `${'Text Example'}`, bold: true }
                                ],
                                style: "header",
                                width: "150",
                                alignment: "left",
                                border: [true, true, true, false],
                                margin: [0, 15, 0, 15]
                              }
                            ]
                          ]
                        }
                      },
        ]

            }

        pdfMake.createPdf(dd).download("Name of Print");
            }

Answer 6

我通过 html2pdf.js 找到的最可靠，最简单的解决方案。我将其与angular 8一起使用。我尝试创建 stackblitz ，但是它存在一些解析错误。因此，我将粘贴以下代码：

import * as html2pdf from 'html2pdf.js';

let options = {
        margin: 1,
        filename: 'receipt.pdf',
        html2canvas: { 
          dpi: 192,
          letterRendering: true, 
          allowTaint: true, 
          useCORS: true, 
          logging: false, 
          scrollX: 0,
          scrollY: 0 
        },
        jsPDF: {
          orientation: 'portrait',
          unit: 'cm',
          format: 'a4'
        }
      }; 
      html2pdf().set(options).from(nativeElement).save().finally(() => anyfunc());

Answer 7

以下代码已在我的项目中使用并起作用

第1步：运行以下命令以安装npm软件包

> npm install jspdf
> npm install html2canvas

第2步：将已安装的程序包导入app.components.ts中。我没有将那些包导入constructor（）

> 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>

第4步：编写用于生成PDF的代码，如下所示

    exportAsPDF()
      {
        let data = document.getElementById('MyDIv');  
        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 8

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

此处数据-> htmlcontent

 TS :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：

此处的一些内容

生成PDF

如何使用Angular 7生成PDF？

8 个答案: