javascriptangulartypescriptjspdfjspdf-autotable

Property 'autoTable' does not exist on type jsPDF


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?


Solution

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