Jspdf-autotable: Property 'autoTable' does not exist on type 'jsPDF'

[sirishasd]

Hi

I got error Property 'autoTable' does not exist on type 'jsPDF' in angular 5
I installed jspdf and jspdf-autotable

package.json file
{
"name": "gradsiren-ui",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.10",
"@angular/cdk": "^5.2.4",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.5",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@ng-idle/core": "^2.0.0-beta.15",
"@ng-idle/keepalive": "^2.0.0-beta.15",
"@ng-select/ng-select": "^1.5.2",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^5.2.0",
"@ngrx/store": "^5.2.0",
"@ngrx/store-devtools": "^5.2.0",
"angular-google-recaptcha": "^1.0.3",
"angular2-moment": "^1.9.0",
"bootstrap": "^4.1.1",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"file-saver": "^1.3.8",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"install": "^0.12.1",
"jspdf": "^1.4.1",
"jspdf-autotable": "^2.3.5",
"ng-recaptcha": "^3.0.5",
"ng2-ckeditor": "^1.2.0",
"ng2-google-charts": "^3.4.0",
"ngrx-store-localstorage": "^5.0.0",
"ngx-bootstrap": "^2.0.3",
"rxjs": "^5.5.6",
"web-animations-js": "^2.3.1",
"xlsx": "^0.14.0",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/file-saver": "^1.3.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/jspdf": "^1.1.31",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}

[JLee21]

I'm experiencing something similar.
I'm using Angular6
Inside angular.json

            "scripts": [
              "node_modules/jspdf/dist/jspdf.min.js",
              "node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.min.js"
            ]
          },

test-component.ts

import { Component, OnInit } from '@angular/core';
import * as jsPDF from 'jspdf';

@Component({
  selector: 'test-component',
  templateUrl: './test-component.html',
  styleUrls: ['./test-component.css']
})
export class PdfTestComponent implements OnInit {

  ngOnInit() {
    var columns = ["ID", "Name", "Age", "City"];

    var data = [
        [1, "Jonathan", 25, "Gothenburg"],
        [2, "Simon", 23, "Gothenburg"],
        [3, "Hanna", 21, "Stockholm"]
    ];

    let doc = new jsPDF('p', 'pt');
    console.log(doc)
    console.log(doc.autoTable)
    doc.autoTable(columns, data);
    doc.save("table.pdf");
  }
}

And this gives me
doc.autoTable is not a function

Which it isn't because you can see by console.log(doc)

But the strange thing is that if I go to the browser CLI and enter in doc, autoTable _is_ a function

So maybe there's something going on with how Angular is overriding jspdf variable

[simonbengtsson]

If you are using angular 7, this worked for me:

import { Component } from '@angular/core';
import jsPDF from 'jspdf';
import 'jspdf-autotable';

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

  constructor() {
    let doc = new jsPDF()
    doc.autoTable(['Test'], [['test']])
    doc.save('table.pdf')
  }
}

[Furqanaa]

If you are using angular 7, this worked for me:

import { Component } from '@angular/core';
import jsPDF from 'jspdf';
import 'jspdf-autotable';

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

  constructor() {
    let doc = new jsPDF()
    doc.autoTable(['Test'], [['test']])
    doc.save('table.pdf')
  }
}

Hi @simonbengtsson , this will make it work, but I still have the error in the terminal, and I can't run the production successfully because of the error?
I think this error is caused because we are creating a new object from the jsPDF and we're trying to access the autoTable method by using that object and JsPdf does not own this property | method, I think the solution here is to create an object from jspdf-autotable library itself, but I don't know how to import this lib in angular 7!
thanks,

[Yorkfv]

Hi @Furqanaa, I working in Angular 8 and I have the same error, in DEV environment that solution work properly but when I try compile for PROD environment I get the same problem during the compilation process

"Property 'autoTable' does not exist on type 'jsPDF'."

, the solution to me for this issue was...

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

const autoTable = 'autoTable';
pdf[autoTable]({
    columns: yourColumns,
    body: yourData,
   // some other code here
});

I'll hope its help you...
Good luck...