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')
  }
}

[furqan-shakir]

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...