I cannot use jsPDF with Angular 10

user_6810539 0
Viewed 10447

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

jspdf angular
3 Answers

After trying so many different solutions for this issue now I've found that both the addHTML and fromHTML is depreciated in latest versions of jspdf and they are replaced with just html. For those who are seeking for a better solution to work with jspdf and Angular 10 here is what looks working and a better result that I've found so far.

To import jspdf version (2.x.x), just simply do: import { jsPDF } from 'jspdf';.

You won't need to include any of the dependencies into angular.json scripts like you would do in previous versions. And if you add scripts of jspdf or html2canvas insideindex.html, also remove them. By running npm install jspdf it also install the html2canvas which is also dynamically imported by jspdf.

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

.....

 @ViewChild('couponPage', { static: true }) couponPage: ElementRef;

.......

openPDF(): void {
  const DATA = this.couponPage.nativeElement;
  const doc: jsPDF = new jsPDF("p", "mm", "a4");
  doc.html(DATA, {
     callback: (doc) => {
       doc.output("dataurlnewwindow");
     }
  });
}

Though for me still using doc.html() method, it wouldn't use the css style that I used for my page.

user_68105390

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.

user_20590510

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;
user_20590510
Related