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');
}
}
Answer from Alciomar Hollanda on Stack Overflow
» npm install jspdf-autotable
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');
}
}
I was able to please TypeScript like this:
import 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 (also works in Angular 14)
Videos
You have to use as following. I had the same question for a while, but after asking the question from the developers, I found that you have to use the instance of jsPdf() as an argument of autoTable() function. Rest goes as the documentation of jsdpf.
import { Component, OnInit } from '@angular/core';
import * as jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
const doc = new jsPDF();
const columns = [['First Column', 'Second Column', 'Third Column']];
const data = [
['Data 1', 'Data 2', 'Data 3'],
['Data 1', 'Data 2', 'Data 3']
];
autoTable(doc, {
head: columns,
body: data,
didDrawPage: (dataArg) => {
doc.text('PAGE', dataArg.settings.margin.left, 10);
}
});
doc.save('table.pdf');
Example
Source Codes
https://codesandbox.io/s/currying-pine-wjp1g?file=/src/app/app.component.ts
Live Demo
https://wjp1g.csb.app/
I found the solution, but changing to another package, PDFMaker.
Check all documentation and supported browsers.
Checkout, there's a awesome playground and one example in Angular 8.
Extracted from discussion above, replace this line:
import { autoTable } from 'jspdf-autotable';
with
import 'jspdf-autotable';
Instead of declaring like:
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
it is better to do this
import 'jspdf';
import 'jspdf-autotable';
declare let jsPDF;
This is how I solved the problem.