html2canvas 不适用于大型 HTML 内容

Question

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

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

有没有办法解决这个问题？我将需要这张图片最终将其传递给 jspdf 库以生成 pdf 文档。

Answer 1

首先要做的事情。如果您正在剪辑，可能是因为您试图捕获对于浏览器来说太大的图像。请参阅有关画布尺寸限制的常见问题解答：

https://html2canvas.hertzen.com/faq

如果是这种情况，那么您需要将图像分解为更小的子图像，并将它们作为单独的页面写入您的 PDF。您不能将它们组合成单个图像，因为浏览器不允许您这样做。

如果您的尺寸小于该尺寸，则可能是由于影响 alpha.12 的缺陷，如果您使用传递选项 windowWidth，捕获 document.body 可以剪辑内容。该缺陷的解决方法是捕获document.body 以外的其他内容，它会起作用。