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?
Advertisement
Answer
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"); }); });