-
Notifications
You must be signed in to change notification settings - Fork 4.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I cannot use jsPDF with Angular 10 #2892
Comments
Use |
I did try, please check the stackoverflow question for the solution I've tried.
on another trial
and yet on another trial
under all these circumstances I've faced different kind of errors in compilation or in browser console. |
The |
So to use |
The |
On the same context should I also add |
No, don't include jspdf or any of its dependencies as script in the angular.json. The import statement is enough. |
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. |
That's odd, please share your code (including your html markup). |
I'll update the stackblitz project I already created in few minutes. |
Here is a stackblitz project I've created. Please check it out. |
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
And right now this doesn't load the It's weird that sometimes it populates the data on the generated pdf without css and another time it's all blank :( |
Hi, i'm using .html() to generate the PDF let doc = new jsPDF(); But the PDF generated only includes the text and icons but did not respect the styles. Any idea? |
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:
Thanks |
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 |
I just upgraded to the latest jsPDF version (2.1.0) and these are the warnings I get: OutputWARNING 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-dependenciesWARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/slicedToArray'. CommonJS or AMD dependencies can cause optimization bailouts. WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/inherits'. CommonJS or AMD dependencies can cause optimization bailouts. WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/possibleConstructorReturn'. CommonJS or AMD dependencies can cause optimization bailouts. WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/toConsumableArray'. CommonJS or AMD dependencies can cause optimization bailouts. WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/helpers/get'. 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.match'. 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.replace'. CommonJS or AMD dependencies can cause optimization bailouts. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.array.fill'. CommonJS or AMD dependencies can cause optimization bailouts. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. WARNING in /app/node_modules/canvg/lib/index.es.js depends on '@babel/runtime/regenerator'. CommonJS or AMD dependencies can cause optimization bailouts. 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:
|
@cloakedch That's an issue of canvg. If you don't use the |
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 |
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. |
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
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).
The text was updated successfully, but these errors were encountered: