I cannot use jsPDF with Angular 10

[Kirubelabr]

I was trying to print my page using jspdf library version 2.1.0 with Angular version 10. I've also added a question in stackoverflow and here is the link https://stackoverflow.com/questions/63667889/i-cannot-use-jspdf-with-angular-10

Reproducing this issue in stackblitz
https://angular-ivy-vtuj3b.stackblitz.io

Version used

1. jspdf version 2.1.0
2. Angular version 10

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 I'm currently using).

[HackbrettXXX]

Use import { jsPDF } from "jspdf" and everything should work fine.

[Kirubelabr]

I did try, please check the stackoverflow question for the solution I've tried.
So far I've tried importing jspdf as follows

import * as jsPDF from 'jspdf'
Not working - errMsg: 'fromHTML is not a function'

on another trial

import { jsPDF } from 'jspdf'
Not working - errMsg: 'fromHTML is not a function'

and yet on another trial

declare const jsPDF: any;
Not working - errMsg: 'jsPDF is not defined'

under all these circumstances I've faced different kind of errors in compilation or in browser console.

[HackbrettXXX]

The fromHTML method was removed in 2.0.0. Use html instead.

[Kirubelabr]

So to use html as you suggested, do I need to install html2canvas as well or shall this work as intended without the library?

[HackbrettXXX]

The html method requires html2canvas, which is dynamically imported by jspdf. npm install jspdf should also install html2canvas automatically, so, in theory, no action from your side is required. Angular will create a separate chunk for html2canvas.

[Kirubelabr]

On the same context should I also add "./node_modules/jspdf/dist/jspdf.umd.min.js" inside angular.json under scripts?

[HackbrettXXX]

No, don't include jspdf or any of its dependencies as script in the angular.json. The import statement is enough.

[Kirubelabr]

Okay, now it seems to be working. One issue though the inner html elements are not populating on the generated pdf. It's all blank.

[HackbrettXXX]

That's odd, please share your code (including your html markup).

[Kirubelabr]

I'll update the stackblitz project I already created in few minutes.

[Kirubelabr]

Here is a stackblitz project I've created. Please check it out.
Editor

[Kirubelabr]

So, after changing versions and trying to figure out what the issue is, now I've narrowed the problem and I'm able to use jspdf with Angular 10. Here it looks working but still it doesn't give the desired output since it couldn't load the css associated with the page. Using the latest jspdf version which is 2.1.0,

import { jsPDF } from 'jspdf';

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

And right now this doesn't load the css style that is used to create the page. This issue was also addressed in previous versions of jspdf and what seems to be working back then was using addHTML instead of fromHTML. But since those two are no longer available in the latest versions of jspdf (since 2.x.x), now I'm stack. Couldn't solve the problem.

It's weird that sometimes it populates the data on the generated pdf without css and another time it's all blank :(

[omendez85]

Hi, i'm using .html() to generate the PDF

let doc = new jsPDF();
let elementHTML = document.getElementsByClassName('id-card');
console.log(elementHTML);
doc.html(document.body.innerHTML, {
callback: function (doc) {
doc.save();
}
});

But the PDF generated only includes the text and icons but did not respect the styles.

Any idea?

[HackbrettXXX]

Quick idea out of my head: Angular usually scopes the styles meaning it prepends a random string to any class and id selector. This is why the selectors don't apply for the isolated html. Could you check if that's the case?

[omendez85]

Quick idea out of my head: Angular usually scopes the styles meaning it prepends a random string to any class and id selector. This is why the selectors don't apply for the isolated html. Could you check if that's the case?

i tried scoping only the component to be converted to PDF, the component has encapsulated the CSS but it's not working, i found two ways that the PDF includes the styles:

1. use the whole page (document.body.innerHTML) as a selector, but I don't need the full page, I only need the component
2. Use html2canvas to create the screenshot of the component and use it to generate the PDF.

Thanks

[HackbrettXXX]

We use html2canvas internally for converting the html to PDF. So if the styles are picked up by html2canvas when creating a screenshot, they should in theory also work when calling jsPDF.html.

[cloakedch]

I just upgraded to the latest jsPDF version (2.1.0) and these are the warnings I get:

Output

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'raf'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/slicedToArray'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/inherits'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/possibleConstructorReturn'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/toConsumableArray'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/get'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.string.match'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.string.replace'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.map'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.symbol'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.string.starts-with'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.filter'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.for-each'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.object.get-own-property-descriptors'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.object.keys'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.join'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/web.dom-collections.for-each'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.object.get-own-property-descriptor'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.reduce'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.every'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.object.to-string'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.regexp.exec'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.concat'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.string.split'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.function.name'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.reflect.construct'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.regexp.to-string'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.some'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.string.includes'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.from'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.promise'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.includes'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.string.trim'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.reverse'. CommonJS or AMD dependencies can cause optimization bailouts.
WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.string.iterator'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.fill'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.number.constructor'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/web.dom-collections.iterator'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.iterator'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.symbol.description'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.reflect.delete-property'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.map'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.slice'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.reflect.apply'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.symbol.iterator'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.array.index-of'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on 'core-js/modules/es.reflect.get-prototype-of'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/regenerator'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I have looked up this repo's issues as well as the issues of canvg, but couldn't find any hints how to solve this (not just suppress). Is this something you are aware of?

EDIT:

Used versions below:

"dependencies": {
    "@angular/animations": "~10.1.0",
    "@angular/common": "~10.1.0",
    "@angular/compiler": "~10.1.0",
    "@angular/core": "~10.1.0",
    "@angular/forms": "~10.1.0",
    "@angular/localize": "~10.1.0",
    "@angular/platform-browser": "~10.1.0",
    "@angular/platform-browser-dynamic": "~10.1.0",
    "@angular/router": "~10.1.0",
    "jspdf": "^2.1.0",
    "jspdf-autotable": "^3.5.10",
  },

[HackbrettXXX]

@cloakedch That's an issue of canvg. If you don't use the addSvgAsImage function you can simply mark canvg as external. See the readme for details.

[ejuvaleru]

1. body

Quick idea out of my head: Angular usually scopes the styles meaning it prepends a random string to any class and id selector. This is why the selectors don't apply for the isolated html. Could you check if that's the case?

i tried scoping only the component to be converted to PDF, the component has encapsulated the CSS but it's not working, i found two ways that the PDF includes the styles:

1. use the whole page (document.body.innerHTML) as a selector, but I don't need the full page, I only need the component
2. Use html2canvas to create the screenshot of the component and use it to generate the PDF.

Thanks

Hi, could you explain how you use html2canvas in the newest version of jsPDF? I know this is included internally but I'm trying to use it and it dosen't respect my CSS styles...

[XeniaPie]

1. body

Quick idea out of my head: Angular usually scopes the styles meaning it prepends a random string to any class and id selector. This is why the selectors don't apply for the isolated html. Could you check if that's the case?

i tried scoping only the component to be converted to PDF, the component has encapsulated the CSS but it's not working, i found two ways that the PDF includes the styles:

1. use the whole page (document.body.innerHTML) as a selector, but I don't need the full page, I only need the component
2. Use html2canvas to create the screenshot of the component and use it to generate the PDF.

Thanks

Hi, could you explain how you use html2canvas in the newest version of jsPDF? I know this is included internally but I'm trying to use it and it dosen't respect my CSS styles...

Here's some useful info. Hope it helps! http://html2canvas.hertzen.com/getting-started

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.