html2canvas无法用于大型HTML内容 [英] html2canvas not working for large HTML content

问题描述

我正在尝试使用html2canvas库来保存动态生成并作为图像输出到页面的html.如果生成的HTML太多，则html2canvas可以正常工作，但是，如果生成的html确实太大(当我尝试打印时，它为70页)，则html2canvas将返回一个canvas对象，其中canvas.toDataURL('image/png')返回data:;就是这样.

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.

我在网上找到了一个帖子，建议将html2canvas.js文件中的maxInt更改为Number.MAX_VALUE，但效果不佳.

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.

是否有解决此问题的方法?我将需要此图像最终将其传递给jspdf库以生成pdf文档.

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.

推荐答案

第一件事.如果要剪切，可能是因为您试图捕获对于浏览器而言太大的图像.请参阅有关画布大小限制的常见问题解答:

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

如果是这种情况，则需要将图像分解为较小的子图像，并将它们作为单独的页面写到PDF中.您不能将它们合并为一个图像，因为浏览器不会允许您.

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.

如果小于该大小，则可能是由于影响alpha.12的缺陷所致，如果您正在使用传递的windowWidth选项，则捕获document.body可以剪辑内容.解决该缺陷的方法是捕获document.body以外的其他东西，并且可以正常工作.

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.

这篇关于html2canvas无法用于大型HTML内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！