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

Solution 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');
...

Solution 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');
    }

}

Solution 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

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

View more solutions

Comments

[luis.mazoni]

Hey Scrambo, I did exactly this right of the bat. But for some reason it is not working specifically with jspdf (I've done it before with moment). The reason I can notice is that for some reason the import statement is trying to get the module from the node_modules dependency instead of getting from the index.d.t declared in typings global. Then I get the message (in browser console): Error: TypeError: AMD module localhost:5555/node_modules/jspdf/dist/jspdf.min.js did not define(…)

[Kirby]

I feel that in angular i should be able to use the component template. Is there an easy way to conver the already built and styled template into jsPDF methods?

[Kirby]

I ended up using this ... view-source:cdn.rawgit.com/MrRio/jsPDF/master/examples/html2‌​pdf/…