I cannot use jsPDF with Angular 10

Question

I was trying to print my page using jspdf library. I've tried so many solutions to get it done following examples on here and almost every Google suggestion links but I still couldn't fix it.

Here is what I've tried so far:

import * as jsPDF from 'jspdf';
.....
openPDF(): void {
    const DATA = this.couponPage.nativeElement;
    const doc = new jsPDF('p', 'pt', 'a4');
    doc.fromHTML(DATA.innerHTML, 15, 15);
    doc.output('dataurlnewwindow');
}

Trying to import jsPDF like the above creates the following error while compiling

ERROR in src/...component.ts:42:21 - error TS2351: This expression is not constructable. Type 'typeof import("jspdf")' has no construct signatures.

42     const doc = new jsPDF('p', 'pt', 'a4');

So, I've tried to import it in another way as suggested in this stackoverflow answer

declare var jsPDF: any;

And yet this creates a console error saying that jsPDF is not defined.

Then I found another solution as posted in here Angular 10/9/8 PDF Tutorial – Export PDF in Angular with JSPDF

And following this method now I got the following error

ERROR TypeError: doc.fromHTML is not a function openPDF notice.component.ts:43 ...Component_Template_button_click_2_listener ...component.html:3 Angular 23

I've no Idea what I've missed here as this library supposed to work in all Angular versions. Any help will be appreciated.

Here I've created a Stackblitz project

Answer 1

After working with the OP for a short time on a stackblitz, it seems the main problem was that the usage of the library changed between versions 1.3.5 (the one used in the examples) to 2.1.0 (the one he was using). I am adding this answer so that it may provide a clue to future solution seekers who suffer from a similar problem.

Answer 2

Instead of the import directive you are using, try

import jsPDF from 'jspdf';

Note that if you are using this method, you will have to delete the

declare var jsPDF:any;