Jspdf: Output to a new tab crashes browser

[mezerny]

When there are many images (about 25 and more), output to a new tab doesn't work. Instead, browser crashes (chrome).
Browser crashes in both cases:

doc.output('dataurlnewwindow');

and

var string = doc.output('datauristring');
var x = window.open();
x.document.open();
x.document.location=string;

[carmex]

I am having this same issue and I'm curious, are you able to do it a different way such that the browser won't crash? I'd be happy with almost any workaround for this crash and it sounds like you have one. Thanks!

[mezerny]

It doesn't crash if I save pdf as a file:

doc.save('filename.pdf');

In that case it takes some time to generate file, but at least works.

[carmex]

Excellent, that solved it for me as well. Thanks for your help.

I suspect the issue is that we are trying to pass a giant datauri string into a new window and there's probably a browswer-imposed limit to the length that that string can be. Since the entire document is encoded into the string I can see how it would quickly become too large for the browser to handle. I'm not sure what the fix could possibly be, but perhaps this could get someone thinking in the right direction.

[diegocr]

Well, if Chrome crashes, then it's definitely a bug in the browser, it shouldn't crash but rather reject gracefully handling such a big data-uri. Feel free to report the issue on the Chrome/ium bug tracker.

[MrRio]

Yeah sounds like a chrome bug. There may be a workaround which involves the
Blob builder and using that URL instead.

On Thursday, July 17, 2014, Diego Casorran [email protected] wrote:

Well, if Chrome crashes, then it's definitely a bug in the browser, it
shouldn't crash but rather reject gracefully handling such a big data-uri.
Feel free to report the issue on the Chrome/ium bug tracker.

—
Reply to this email directly or view it on GitHub
https://github.com/MrRio/jsPDF/issues/300#issuecomment-49362344.

James Hall
Director

Parallax

_Send big files to us using WeTransfer
– https://parallaxagency.wetransfer.com/
https://parallaxagency.wetransfer.com/_

[phone]
http://parall.ax/

Registered office: The Old Brewery, High Court, Leeds, LS2 7ES
Registered in England no. 07430032
VAT No. 101 3405 84

[diegocr]

@MrRio correct, something like this:

var blob = pdf.output("blob");
window.open(URL.createObjectURL(blob));

[diegocr]

fwiw, on 140c979997 i've added a new bloburl output type.

[pthieuklick]

Hi,

Is there any update on this? I'm attempting to try to add a large number of large PNGs to the pdf and at a certain point, it begins to crash. I have a jsfiddle that can reproduce the issue if it helps. It does seem like a browser, but wondering if there are any workarounds.

The issue seems to be with the AddImage() call, not on save() or output(). Perhaps chrome has a limit on dataurl size?

[diegocr]

@pthieuklick Feel free to provide us such fiddle, if the problem is with addImage we might prevent caching the images...

[Samyoul]

Seeing as this bug is still present in Chrome, your recommended solution works very well.

var blob = pdf.output("blob");
window.open(URL.createObjectURL(blob));

[donatsu]

This doesn't work for me at all @Samyoul & @diegocr . I've built a "converter engine" that converts to a Uint8Array and then directly with btoa to a base64 image so I don't need to load the heavy canvas. However it is still too heavy for like 60+ pages and the whole thing crash now and then.

I'm handling a lot of data and the frustrating part is that things work fine when you start developing with just a few pages and the more you get, the more problems you have.

Edit: With that said, even with just the doc.save function it crash. I've given up on output.

[myj1214]

If html has a image that src is 'data:image/svg+xml;base64,' then the browser will be crash.

[graywithanA]

I was having the same issue but found a solution in issue #359. As that issue suggests, Chrome doesn't crash is you use JPEG instead of PNG. The only issue that I ran into with using JPEG is that there is no transparency so I had to be sure to change the canvas background to white in order to avoid a black background.

This was easily done by following @Nd60's suggestion in issue #247.

Hope this helps somebody in the future.