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\"         


        

Answer 1

Angular 8 +

This is how i did in Angular 8 please check below example which generate fake user using faker service, you can change it with your API response.

Install packages via npm

npm i jspdf jspdf-autotable faker --save

Install types

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

add below entries into angular.json

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

component.ts

import * as faker from 'faker'; // Not really require by jspdf or jsPDF-AutoTable 
declare var jsPDF: any;


@Component({
  selector: 'faker',
  templateUrl: './faker.component.html',
})


export class FakerPDFGeneratorComponent {



 headRows() {
    return [{id: 'ID', name: 'Name', email: 'Email', city: 'City', expenses: 'Sum'}];
  }

    footRows() {
    return [{id: 'ID', name: 'Name', email: 'Email', city: 'City', expenses: 'Sum'}];
  }

   bodyRows(rowCount) {
    rowCount = rowCount || 10;
    let body = [];
    for (var j = 1; j <= rowCount; j++) {
      body.push({
        id: j,
        name: faker.name.findName(),
        email: faker.internet.email(),
        city: faker.address.city(),
        expenses: faker.finance.amount(),
      });
    }
    return body;
  }

createPdf() {
    var doc = new jsPDF();

    doc.setFontSize(18);
    doc.text('With content', 14, 22);
    doc.setFontSize(11);
    doc.setTextColor(100);

    // jsPDF 1.4+ uses getWidth, <1.4 uses .width
    var pageSize = doc.internal.pageSize;
    var pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth();
    var text = doc.splitTextToSize(faker.lorem.sentence(45), pageWidth - 35, {});
    doc.text(text, 14, 30);

    doc.autoTable({
      head: this.headRows(),
      body: this.bodyRows(40),
      startY: 50,
      showHead: 'firstPage'
    });

    doc.text(text, 14, doc.autoTable.previous.finalY + 10);

    doc.save('table.pdf');
  }

}

Go ahead and play around with code and demo

Answer 2

I solved this issue, first import the Jspdf import * as jsPDF from 'jspdf'; i'm used a codesmells tatic, copied the content of jspdf autotable and pasted inside the jspdf.js, then works fine for me.

in the official site said you have to use //declare var jsPDF: any; // Important . it doesnt work in my case, try import * as jsPDF from 'jspdf'; instead.

in angular.json in scripts :

"./node_modules/jspdf/dist/jspdf.min.js", "./node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js",

Answer 3

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.

Answer 4

First you have declared .js files in styles property in angular-cli.json, you should add them to scripts. In the configuration that you have, you should add your jspdf scripts to scripts in angular-cli.json, So:

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

then you don't have to import any jspdf to your component. declare var jsPdf: any will be enough to use it.

Answer 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

Answer 6

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', 'david@example.com', 'Sweden'],
    ['Castille', 'castille@example.com', 'Norway']
  ]
});

Works in Angular 7.