Create a PDF from html using angular2 / typescript

Question

I want to accept part of my HTML template and convert it to a PDF file to give the user the opportunity to download it. (After pressing a button, for example).

I found the jsPDF library, how to use jsPDF in an Angular2 (RC4) application?

Thank you

Answer 1

If you want to use it in the production process, you definitely do not want to depend on the link to the Internet link in your index.html, for example, suggested by @khalil_diouri.

So, to use it properly in an Angular2 / Typescript environment, first install it from npm

npm install --save jspdf

If you use SystemJS, map it in your configuration file

 map: { "jspdf": "node_modules/jspdf/dist/jspdf.min.js" } 

Install definition package: (if not installed)

npm install typings --global

Install definition files:

typings install dt~jspdf --global --save

Finally, import it into the component.ts file

 import jsPDF from 'jspdf' ... let doc = new jsPDF(); doc.text(20,20,'Hello world'); doc.save('Test.pdf'); ... 

Answer 2

as an answer

this link is required to import jsPDF content

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> // to use jsPDF for registring pdf file 

then you have the .ts component

You do it

 declare let jsPDF; @Component({ template: ` <button (click)="download()">download </button> ` }) export class DocSection { constructor() { } public download() { var doc = new jsPDF(); doc.text(20, 20, 'Hello world!'); doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.'); doc.addPage(); doc.text(20, 20, 'Do you like that?'); // Save the PDF doc.save('Test.pdf'); } } 

Answer 3

AddHtml method is deprecated:

Source: plugins / addhtml.js, line 12 Forbidden: This replaces the vector API. see here

Maps an HTML element to a canvas object, which is added to the PDF

This function requires html2canvas or rasterizeHTML

Answer 4

Why use definition files (also known as declarations)?

To use external javascript libraries (e.g. jsPDF) with Angular2 applications (which use Typescript), you will need type definition files for these javascript libraries. These files provide type information (as in String , Number , boolean , etc.) For typescript for reference on checking the type of compilation time. (Since javascript is freely typed)

Another explanation about d.ts files can be found here .

How to use

You can download the npm package called typings , which will help speed up the process. The following is a quick guide to its use. Once you have established typing, you can run:

 npm run -- typings install dt~jspdf --global --save 

to get a typing file that you can then use in your project.

Answer 5

I tried almost all npm packages to generate HTML content in PDF. this or that function does not work, because the contents of the table are damaged or do not load images. After so many attempts, I found Kendo UI Angular PDF Export. Kendo Angular export user interface worked for many functions besides dynamic image loading. So, I was looking to solve this problem, but, unfortunately, I did not find the proper documentation to solve this problem. After so many tracks, I solved it.

Follow the steps below to generate HTML content in PDF using the Kendo UI Angular export npm package.

Download and install the package.

npm install --save @ progress / kendo-angular-pdf-export @ progress / kendo-drawing

For Angular 6, install the rxjs-compat package. For more information, see the article on upgrading to Angular 6.

npm install --save rxjs-compat @ 6

For Angular 5 or earlier, install RxJS v5. 5+.

npm install --save rxjs@ ^ 5.5

After installation, import PDFExportModule into the root or function module of the application.

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { PDFExportModule } from '@progress/kendo-angular-pdf-export'; import { AppComponent } from './app.component'; @NgModule({ bootstrap:[AppComponent], declarations: [AppComponent], imports:BrowserModule, PDFExportModule] }) export class AppModule { } 

For a complete working example, please read my blog at https://www.stackquery.com/articles/how-to-generate-pdf-in-angular-with-repeated-headers-images-and-watermark/75 .

The above blog example allows large dynamic tables with automatically repeating headings on each page and large dynamic images, and also allows the use of page breaks between pages.

Note. The above example does not take screenshots such as jsPDF or other npm packages. The above example is very efficient; it takes only less than 200 KB to create high-resolution, high-speed PDFs.