error TS2351: This expression is not constructable. Type 'typeof import("jspdf")' has no construct signatures

Question

I want to convert html file to pdf file in my project, but I got an error, how can I fix my problem?

npm install jspdf

DownloadCvCompanent.ts:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
  selector: 'app-download-cv',
  templateUrl: './download-cv.component.html',
  styleUrls: ['./download-cv.component.scss']
})
export class DownloadCvComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {}
  @ViewChild('htmlData') htmlData:ElementRef;
  USERS = [
    {
      "id": 1,
      "name": "Leanne Graham",
      "email": "sincere@april.biz",
      "phone": "1-770-736-8031 x56442"
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "email": "shanna@melissa.tv",
      "phone": "010-692-6593 x09125"
    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "email": "nathan@yesenia.net",
      "phone": "1-463-123-4447",
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "email": "julianne@kory.org",
      "phone": "493-170-9623 x156"
    },
    {
      "id": 5,
      "name": "Chelsey Dietrich",
      "email": "lucio@annie.ca",
      "phone": "(254)954-1289"
    },
    {
      "id": 6,
      "name": "Mrs. Dennis",
      "email": "karley@jasper.info",
      "phone": "1-477-935-8478 x6430"
    }
  ];
  public openPDF():void {
    let DATA = this.htmlData.nativeElement;
    let doc = new jsPDF('p','pt', 'a4');
    doc.fromHTML(DATA.innerHTML,15,15);
    doc.output('dataurlnewwindow');
  }
  public downloadPDF():void {
    let DATA = this.htmlData.nativeElement;
    let doc = new jsPDF('p','pt', 'a4');
    let handleElement = {
      '#editor':function(element,renderer){
        return true;
      }
    };    
    doc.fromHTML(DATA.innerHTML,15,15,{
      'width': 200,
      'elementHandlers': handleElement
    });
    doc.save('angular-demo.pdf');
  }

}

DownloadCvCompanent.html:

<div class="container">
    <div class="row">

        <div class="col-md-8" id="htmlData" #htmlData>
            <table class="table table-bordered">
                <tr class="table-primary">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                </tr>
                <tr *ngFor="let user of USERS">
                    <th>{{user.id}}</th>
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.phone}}</td>
                </tr>
            </table>
        </div>

        <div class="col-md-4 text-right">
            <button class="btn btn-success btn-block" (click)="openPDF()">Open PDF</button>
            <button class="btn btn-danger btn-block" (click)="downloadPDF()">Download PDF</button>
        </div>

    </div>
</div>

error in terminal:

ERROR in src/app/layout/home/download-cv/download-cv.component.ts:57:19 - error TS2351: This expression is not constructable.
  Type 'typeof import("jspdf")' has no construct signatures.

57     let doc = new jsPDF('p','pt', 'a4');
                     ~~~~~
src/app/layout/home/download-cv/download-cv.component.ts:66:19 - error TS2351: This expression is not constructable.
  Type 'typeof import("jspdf")' has no construct signatures.

66     let doc = new jsPDF('p','pt', 'a4');

error in console (after click button Download PDF;

core.js:6241 ERROR TypeError: jspdf__WEBPACK_IMPORTED_MODULE_1__ is not a constructor
    at DownloadCvComponent.downloadPDF (download-cv.component.ts:66)
    at DownloadCvComponent_Template_button_click_18_listener (download-cv.component.html:23)
    at executeListenerWithErrorHandling (core.js:21860)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21902)
    at HTMLButtonElement.<anonymous> (platform-browser.js:976)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41686)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

package.json:

 { 
   ...
    "jspdf": "^2.3.0",
   ...
 }

How do I fix my problem?

Answer 1

Below solution is working absolutely fine for me and this works even if you have images in your html. Create instance of jspdf instead of jsPDF and used html() method instead of fromHTML().

**Import statement:**
import  jspdf from 'jspdf';

@ViewChild('htmlData', {static: false}) htmlData:ElementRef;

downloadPDF(){
let DATA = this.htmlData.nativeElement;
let PDF = new jspdf('p', 'px', 'a2');
PDF.html(DATA, {
  callback: function(doc){
    doc.save('angular-demo.pdf');
  },
  margin:15,
  x: 10,
  y: 10
});
}

Answer 2

you should use this to import the library:

    import { jsPDF } from 'jspdf'

important! using this ES6 syntax you don't need to import the library via the script section in angular.json

Next, you need to use the callback function to show or download the pdf file:

  public openPDF():void {
    let data = this.htmlData.nativeElement;
    
    let options : any = {
      orientation: 'p',
      unit: 'px',
      format: 'a4',
      };
    let doc = new jsPDF(options);
    doc.html(data.innerHTML, {
      callback: function (doc) {
            doc.output('dataurlnewwindow');
          },
      margin:15,
      x: 10,
      y: 10
    });
    
  }
  public downloadPDF():void {
    let data = this.htmlData.nativeElement;
    let options : any = {
      orientation: 'p',
      unit: 'px',
      format: 'a4',
      };
    let doc = new jsPDF(options);
     doc.html(data.innerHTML, {
      callback: function (doc) {
            doc.save("angular-demo.pdf");
          },
      margin:15,
      x: 10,
      y: 10
    });
  }

Working demo

UPDATE:

• The fromHTML function was replaced by html in 2.0.0. amoung other breaking changes that you should be aware if you are migrating from 1.xx to 2.xx