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