How to generate a PDF using Angular 7?

问题

I have to generate a PDF report from data entered by a user, which would be saved in an object. So far, I have come across stuff which generates an HTML page and then takes a screenshot and converts it into PDF. I am looking to generate a PDF directly from data stored in the object. Any ideas?

回答1:

It is a common requirement, but you haven't provided much detail on specific requirements of your PDFs. You can look at:

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

or

https://parall.ax/products/jspdf

as client-side options. There are other options too depending on what you are likely to want to do with the PDF once generated. For example, it might make more sense to send the data back to your server (if you have one) to generate a PDF AND store it in a database etc.

Hope that helps.

回答2:

You can Download Html to Pdf, Hope This Will Helps..!

working Demo

回答3:

Here is a good overview of available tools and technologies: Modern html to pdf conversion 2019 And a working example with jspdf & html2canvas: here

回答4:

You can print using PDFMAKE plugin. You can access it on Git with this link https://www.npmjs.com/package/ng-pdf-make. After the installation is very easy, just import, add these libraries in the component that will print:

import * as pdfMake from "pdfmake/build/pdfmake";

import * as pdfFonts from "pdfmake/build/vfs_fonts";

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");
            }

回答5:

The most reliable and easy solution I found with html2pdf.js. I have used it with angular 8. I tried to create stackblitz, but it is having some resolution error. Hence I am pasting the code below:

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

来源：https://stackoverflow.com/questions/55019343/how-to-generate-a-pdf-using-angular-7