-->

html2canvas not working for large HTML content

2019-08-11 08:25发布

问题:

I am trying to use html2canvas library, to save html that's dynamically generated and output to the page as image. If the HTML generated isn't too much, then the html2canvas would work just fine, however, if the html generated is really too big (when I try to print it, it's 70 pages), then the html2canvas will return a canvas object where canvas.toDataURL('image/png') returns data:; and that's it.

I found a post online suggesting to change the maxInt in the html2canvas.js file to be Number.MAX_VALUE, but that didn't work as well.

Is there a way to workaround this issue? I will need this image to eventually pass it to jspdf library to generate a pdf document.

回答1:

First things first. If you are getting clipping it could be because you are trying to capture an image that is too large for the browser. See the FAQ on limits of canvas sizes:

https://html2canvas.hertzen.com/faq

If that's the case then you'll need to break up the image into smaller sub-images and write those out as separate pages to your PDF. You can't combine them into a single image because the browser won't let you.

If you are under that size then it could be because of a defect that affects alpha.12 where capturing document.body can clip content if you are using passing the option windowWidth. The workaround to that defect is just to capture something other than document.body and it'll work.