Firefox hangs on using this

[akash2016]

We are using this package with ReactJS. This is working as per expectation in all browsers except Firefox. When the user interacts to download the pdf, Firefox hangs completely and show attached message.Memory usage looks fine.

[akash2016]

It's only happening with dynamic import(in Firefox). When I try to import it normally it works fine. Can you suggest something?

[eKoopmans]

Hi @akash2016, that sounds like an issue! I'm not sure the solution, but it would be nice to find a resolution. What do you mean by dynamic import?

[akash2016]

Thanks @eKoopmans for writing back. Dynamic import means to fetch the bundle if required during runtime. Please refer this for detailed explanation. I am using Webpack to bundle my JS modules and trying to load pdf package only when user clicks on pdf download button.

[eKoopmans]

I see! A few suggestions:

• Try importing the dependencies (jsPDF, html2canvas, and es6-promise/auto) statically and just html2pdf dynamically, to try to track down the problem.
• Also try removing import 'es6-promise/auto' entirely from index.js for testing (it's necessary for IE but not FF).
• You could also see if copying the imports for jsPDF/html2canvas from worker.js into index.js resolves anything.
• Try just importing html2pdf but not calling/using it when the user interacts - does it still hang?

If you find a solution, I'm happy to work it in. Thanks!

[akash2016]

@eKoopmans I am not able to download pdf even with normal es6 imports. I get the same error as attached in the above screenshot. Could you suggest something?

[arthurgermano]

@eKoopmans Hi I am having the same problem. Strangely only in firefox.
I am using the plugin with Vue, so it has to load dynamically.

I am testing and trying to understand it too.

Many thanks.

[akash2016]

@arthurgermano I am facing the same issue only in Firefox even without dynamically loading the module. Were you able to find any workaround?

[arthurgermano]

@akash2016 Hi.. nothing yet.. Vue allows to pre compile code and create chunks of files JS.
When I create to production it fails, when I create to homologation or dev, the chunks created are different and works just fine. So it makes hard for me to test or find a solution. In one environment works and in the other don't =(.
I will continue trying to find a solution, if I find anything I am going to reply here

Many thanks..

[arthurgermano]

@akash2016 @eKoopmans
Hi everyone..
Here is the normal log
0ms html2canvas: html2canvas $npm_package_version Logger.js:36:17
578ms html2canvas: Document cloned, using computed rendering Logger.js:36:17
578ms html2canvas: Starting node parsing.......
And so on..

But when I try in production.. it hangs on this first line. And then Firefox accuses the problem exampled in the first comment.
0ms html2canvas: html2canvas $npm_package_version

So far not a clue =(

[akash2016]

@arthurgermano It is behaving exactly same for me. Working fine in dev but failing in Production. Even I tried debugging but no success so far.

[arthurgermano]

@akash2016 @eKoopmans
Hi.. so the problem is when I execute setOpt
Here is the command I execute
html2pdf().from(document.getElementById('PDFCertificado')).set(opt).toPdf().save()

The first part
html2pdf().from(document.getElementById('PDFCertificado'))
Executes ok.

when I execute
set(opt) It stops!..

I will continue working on that.. see what I can find out about it..

[arthurgermano]

@akash2016 @eKoopmans
Hi.. I find out where the problem is..

But how to fix it is another issue ..
So it happens because of the options

Here is what I have
let opt = { margin: [15, 10, 15, 10],// top, left, bottom, right filename: filename.pdf, image: { type: 'jpeg', quality: 1 }, html2canvas: { logging: true }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'p'} };
If I set margin.. it hangs forever.. I don't know why it happens only on firefox.
But if I withdraw the margin options it works just fine!

The question is.. what is happening on margin ??
I will try to pass different sets of margin and try to understand a little bit more..

So it works on firefox without margin.. =D

[akash2016]

@arthurgermano Thanks for commenting the workaround. @eKoopmans It looks weird that adding margin fails in Production mode while it works fine in dev.

[sandroden]

I confirm what @arthurgermano said about margin. I don't have dynamically imported libraries and firefox hangs if I set margin. When commenting the margins (or in dev) everything works fine. Clearly with margins in production Firefox hangs forever.