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': [ '..

Solution 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';
declarelet jsPDF;

In my case

var doc = newjsPDF('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");
        });
    });

Solution 2:

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

Instead of just use this:

declarevarjsPDF: any;

Try this:

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

It works fine to me.

Solution 3:

The following worked for me in Angular 11, jsPDF 2.3.1, jspdf-autotable 3.5.14:

import jsPDF from'jspdf'import autoTable from'jspdf-autotable'
  
public printTable() {

    const doc = newjsPDF('l', 'mm', 'a4'); 
    
    const head = [['ID', 'Country', 'Index', 'Capital']]
    const data = [
        [1, 'Finland', 7.632, 'Helsinki'],
        [2, 'Norway', 7.594, 'Oslo'],
        [3, 'Denmark', 7.555, 'Copenhagen'],
        [4, 'Iceland', 7.495, 'Reykjavík'],
        [5, 'Switzerland', 7.487, 'Bern'],
        [9, 'Sweden', 7.314, 'Stockholm'],
        [73, 'Belarus', 5.483, 'Minsk'],
    ]

    autoTable(doc, {
        head: head,
        body: data,
        didDrawCell: (data) => { },
    });

    doc.save('table.pdf');
}

Solution 4:

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 componentimport { Component } from'@angular/core';

declarevarjsPDF: any; // Important@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
exportclassAppComponent {
    title = 'app works!';

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

Updated Sample:

import { Component } from'@angular/core';
declarevarjsPDF: any;

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

}

Solution 5:

assuming this is a typescript issue and you have @types/jspdf installed as a devDependency you just need to extend jsPDF types...

import { jsPDF } from'jspdf';
import'jspdf-autotable';
import { UserOptions } from'jspdf-autotable';

interface jsPDFCustom extends jsPDF {
    autoTable: (options: UserOptions) =>void;
}

const doc = newjsPDF() as jsPDFCustom;