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?

回答1:

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

回答2:

For those people who are using angular 6/7 try to do the following:

Instead of just use this:

declare var jsPDF: any;

Try this:

declare const require: any;
const jsPDF = require('jspdf');
require('jspdf-autotable');

It works fine to me.

回答3:

Hi I think you have to use jspdf.plugin.autotable.min.js along with jspdf.js to work. Here is the github link you can refer to https://github.com/simonbengtsson/jsPDF-AutoTable Sample from above link.

    // app.component.ts or any other component
import { Component } from '@angular/core';

declare
var jsPDF: any; // Important

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';

    constructor() {
        var doc = new jsPDF('p', 'pt');
        doc.autoTable(columns, data);
        doc.save("table.pdf");
    }
}

Updated Sample:

    import { Component } from '@angular/core';
declare var jsPDF: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
  constructor() { 
    console.log('hi i m constr');
    var test = new jsPDF();
    console.dir(test.autoTable);
  }

}

来源：https://stackoverflow.com/questions/47344349/property-autotable-does-not-exist-on-type-jspdf

标签

javascript

angular

typescript

jspdf

jspdf-autotable