» npm install jspdf-autotable
Videos
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)
You have to install @types/jspdf and @types/jspdf-autotable as dev-dependencies.
If you use yarn:
yarn add -D @types/jspdf @types/jspdf-autotable
For npm use:
npm install @types/jspdf @types/jspdf-autotable --save-dev
npm install jspdf jspdf-autotable
for any dependency error execute below statement
npm install jspdf jspdf-autotable --force
You need to call loadScript more than once, then wait for them to load:
Promise.all([loadScript(this, JSPDF), loadScript(this, JSPDF_AUTO_TABLE)])
.then(() => {
console.log('loaded');
this.jsPDFLoaded = true;
})
.catch(() => {
console.log('not loaded');
});
I tried like below, and it worked fine for me
jsPdfInitialized = false;
renderedCallback(){
console.log('renderedCallback start');
if (this.jsPdfInitialized) {
return;
}
this.jsPdfInitialized = true;
loadScript(this, jsPDFScript)
.then(() => {
console.log('then');
// load the autotable js file
loadScript(this, jsPDFAutoTableScript);
})
.catch(error => {
console.log('error');
throw(error);
});
}
Here I have loaded the autotable script only if jsPDF is loaded successfully so as to avoid any conflict.
Note: try once in incognito also, just to be sure that no caching related problem is there.