CODEWITHSUNDEEP
angularjspdf
Infojam
Infojam

Reputation: 175

How to use jsPDF in Angular 7? Gets jspdf__WEBPACK_IMPORTED_MODULE_2__.jsPDF is not a constructor error

I am trying to use jsPDF in my Angular 7.1.3 project.

My package.json is below (related parts):

"dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "jspdf": "^1.5.3",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },

My component:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { jsPDF } from 'jspdf';

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

  @ViewChild('pdfTable') pdfTable: ElementRef;


  public downloadAsPDF() {
    const doc = new jsPDF();

    const specialElementHandlers = {
      '#editor': function (element, renderer) {
        return true;
      }
    };

    const pdfTable = this.pdfTable.nativeElement;

    doc.fromHTML(pdfTable.innerHTML, 15, 15, {
      width: 190,
      'elementHandlers': specialElementHandlers
    });

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

There is no compile time error but running downloadAsPDF() function gives:

ERROR TypeError: "jspdf__WEBPACK_IMPORTED_MODULE_2__.jsPDF is not a constructor"

Upvotes: 2

Views: 9466

Answers (4)

Hardik Solgama
Hardik Solgama

Reputation: 13

install 1.4.1 version

 npm install [email protected]

used import this :

import  jsPDF  from 'jspdf';

write below code :

const doc = new jsPDF();
var parser = new DOMParser();
var data = parser.parseFromString("<html><head></head><body>Hello world</body></html>", 'text/html');
doc.fromHTML(data.body.innerHTML, 15, 15, {
            width: 190,
});
doc.save('savePDF.pdf');

Upvotes: 0

Victor Victorio Nu&#241;ez
Victor Victorio Nu&#241;ez

Reputation: 21

im using angular 10 and this works: const doc = new jspdf.jsPDF();

Upvotes: 2

Mario
Mario

Reputation: 968

import { jsPDF } from 'jspdf'; works perfectly fine in angular 9. Try import * as jsPDF from 'jspdf';

Upvotes: 0

Infojam
Infojam

Reputation: 175

The error is caused by the import statement

import { jsPDF } from 'jspdf';

Change to:

import jsPDF from 'jspdf';

Upvotes: 11

Related Questions