how to use jsPDF and jspdf-autotable in angular 5

Question

I am trying to use jsPDF and jspdf-autotable in my Angular 5.2.0 project. My package.json is below (related parts):

"dependencies": {
    ...
    "jspdf": "^1.3.5",
    "jspdf-autotable": "^2.3.2"
    ...
}

My angular-cli.json is below (related parts):

"scripts": [
    ...
    "../node_modules/jspdf/dist/jspdf.min.js",
    "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
    ...
  ]

My component (related parts ):

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})
export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // typescript compile time error
        doc.save('table.pdf');
    }
}

It says:

[ts] Property 'autoTable' does not exist on type 'jsPDF'.

I tried to replace imports in my component with

// import * as jsPDF from 'jspdf';
// import 'jspdf-autotable';
declare var jsPDF: any;

then there is no compile time error but while running downloadPDF() function it says :

ERROR ReferenceError: jsPDF is not defined

Solution 1

To work with jspdf-autotable in angular 5, one must install jspdf and jspdf-autotable via npm

npm install jspdf-autotable --save

also add the jspdf and jspdf-autotable files to the scripts array in angular-cli.json

"scripts": [
    "../node_modules/jspdf/dist/jspdf.min.js",
    "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],

and in component never import jspdf or jspdf-autotable just

declare var jsPDF: any;

Of course before working with jspdf-autotable one should install jspdf and for development @types/jspdf via npm

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

Solution 2

Is working for me Angular 5.

To work with jspdf-autotable in angular 5, one must install jspdf and jspdf-autotable via npm

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

also add the jspdf and jspdf-autotable files to the scripts array in angular-cli.json

"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js",
"../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],

and in component never import jspdf or jspdf-autotable just.

Forget about the following import.

    import * as jsPDF from 'jspdf'; 
    import 'jspdf-autotable';

Just use Before @Component:

declare var jsPDF: any;

Your component (related parts ):

declare var jsPDF: any;

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})

export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // typescript compile time error
        doc.save('table.pdf');
        }
    }

Solution 3

I was able to please TypeScript like this:

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
import { UserOptions } from 'jspdf-autotable';

interface jsPDFWithPlugin extends jsPDF {
  autoTable: (options: UserOptions) => jsPDF;
}
...
const doc = new jsPDF('portrait', 'px', 'a4') as jsPDFWithPlugin;
doc.autoTable({
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', '[email protected]', 'Sweden'],
    ['Castille', '[email protected]', 'Norway']
  ]
});

Works in Angular 7.

Solution 4

I'm using angular 7, and just declare var jsPDF: any; doesn't work to me. After some googling, the solution was:

declare const require: any;
const jsPDF = require('jspdf');
require('jspdf-autotable');

And of course, I installed the modules from npm and include them into the scripts array in angular.json. It works fine to me.

Solution 5

In angular-cli.json

"scripts": [
    "../node_modules/jspdf/dist/jspdf.min.js"
  ],

In your project

import * as jsPdf from 'jspdf';
import 'jspdf-autotable';

This work for me

View more solutions

Comments

[RIDVAN TANIK]

thank you. Your right .js files should be declared in scripts array, and I actually declared them in there - fixed it in the question. My previous attempt was installing dependencies via npm. That is why my dependencies object in package.json includes "jspdf": "^1.3.5", "jspdf-autotable": "^2.3.2" also devDependencies object includes "@types/jspdf": "^1.1.31". Anyway i solved my problem. Answering my question below.

[Ali]

Thanks @Alciomar Hollanda, It help me a lot.

[Fariz Fakkel]

Man, converting HTML to PDF should be a trivial task. Thanks for this! This is awesome.

[ayed abboushi]

That solved the problem, This should be the accepted answer.

[Master Yoda]

This made my day

[fabricioflores]

This is the cleanest solution. Not sure why doesn't have a lot of votes

[Miguel Ormita]

On my end, I get the error "ReferenceError: jsPDF is not defined"

[Miguel Ormita]

This work really well and provides clear and logical documentation, especially the typing.

[Miguel Ormita]

Instead of using "import * as jsPDF", I simply used "import { jsPDF } from 'jspdf';"