Property 'autoTable' does not exist on type jsPDF

Deep Kakkar picture Deep Kakkar · Nov 17, 2017 · Viewed 13.6k times · Source

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?

Answer

Deep Kakkar picture Deep Kakkar · Nov 17, 2017

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