I am using angular2
and Node JS
. I have installed jspdf and jspdf-autotable both modules using npm
.
In angular-cli.json file, I have embedded the scripts:
"scripts": [
"../node_modules/jspdf/dist/jspdf.min.js",
"../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],
In my component.ts
file , I have imported these files as follows:
import * as jsPDF from 'jspdf';
import * as autoTable from 'jspdf-autotable';
I have also tried these lines to import jspdf-autotable
import { autoTable } from 'jspdf-autotable';
import 'jspdf-autotable';
But nothing is working.
In function of component.ts
file I am using sample code as follows:
var columns = ["ID", "Country", "Rank", "Capital"];
var data = [
[1, "Denmark", 7.526, "Copenhagen"],
[2, "Switzerland", 7.509, "Bern"],
[3, "Iceland", 7.501, "Reykjavík"],
[4, "Norway", 7.498, "Oslo"],
[5, "Finland", 7.413, "Helsinki"]
];
var doc = new jsPDF();
doc.autoTable(columns, data);
doc.output("dataurlnewwindow");
But now when I run the node command to start app then during compilation I am getting error as:
Property 'autoTable' does not exist on type 'jsPDF'.
Can any one please suggest?
I got the answer:
No need to import jspdf or jspdf-autotable in component.ts file.
component.ts:
import { Component, Input, OnInit, Inject } from '@angular/core';
declare let jsPDF;
In my case
var doc = new jsPDF('l', 'mm', [305, 250]);
var options1 = {
padding: 50
};
doc.addHTML($('#riskdate_heading'),0,10,options1 ,() => {
doc.addHTML($('#risktitle'),0,30,options1, () => {
var res = doc.autoTableHtmlToJson(document.getElementById("riskTable"));
var header = function(data) {
doc.setFontSize(18);
doc.setTextColor(40);
doc.setFontStyle('normal');
};
var riskoptions = {
tableWidth: 'auto',
addPageContent: header,
margin: { top: 10, horizontal: 7 },
startY: 50,
columnStyles: {0: {columnWidth: 'wrap'}}
};
doc.autoTable(res.columns, res.data, riskoptions);
doc.save("table.pdf");
});
});