Generate PDF file from html using angular2/typescript

Question

I want to take a part of my HTML template and convert it to PDF file to give the user an option to download it. (After they click a button for example).

I found a library called jsPDF, how would I use jsPDF in an Angular2 app (RC4)?

thank you

Answer 1

If you want to use it in production, you definitely don't want to depend on an internet link being referenced in your index.html, like proposed by @khalil_diouri.

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

npm install --save jspdf

If you are using SystemJS, map it in your config 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

And, finally, import it in your component.ts file

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

Answer 2

as a response

this link is necessary 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 in you component.ts

you do that

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

the AddHtml method is deprecated :

Source: plugins/addhtml.js, line 12 Deprecated: This is being replace with a vector-supporting API. see here

Renders an HTML element to canvas object which added to the PDF

This feature requires html2canvas or rasterizeHTML

Answer 4

Why use Definition (also known as Declaration) files?

To use external javascript libraries (jsPDF, for example) with Angular2 applications (which use Typescript) you are going to want Type Definition files for those javascript libraries. These files provide type information (as in String, Number, boolean, etc.) to typescript for help with compile time type checking. (Since javascript is loosely typed)

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

How to use

You can download an npm package called typings which will help expedite the process. Here's a short guide on how to use it. Once you have typings installed, you can run:

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

to get the typings file which you can then use in your project.