在html2canvas (html2pdf)中根据比例缺失图像

Question

我正在尝试使用html2pdf在我的html中制作合理数量的文本和图形的PDF。到目前为止，一切都很好，PDF得到了，它看起来很好。大约有20页。然而，缺少多个图形。一些相关信息:

• 大多数缺失的图形都在文档的末尾。然而，最终的图形是渲染的，所以它不是在结束时明确的截断
• 图形的文本在那里，但图形本身不是
• 缺失的图都是同一类型的。其他这种类型的图都被渲染了，看起来很好。
类型似乎没有问题。
• 如果我将html2canvas配置的比例降低到0.8左右，每个图形都会被渲染(当然质量会降低)。

事实上，规模影响他们是否渲染，给我的想法，像定时/超时是这里的一个问题。更大的规模显然意味着更长的渲染时间，但它似乎并不等待它完成。或者类似的东西

在生成PDF的大部分代码下面。onClone是正确呈现图形所必需的。如果它被删除，上面描述的问题仍然发生(但是áre呈现的图形是丑陋的)。

const options = {
filename: 'test.pdf',
margin: [15, 0, 15, 0],
image: { type: 'jpeg', quality: 1 }
html2canvas: {
scale: 2,
scrollY: 0,
onclone: (element) => {
const svgElements = element.body.querySelectorAll('svg');
Array.from(svgElements).forEach((item: any) => {
item.setAttribute('width', item.getBoundingClientRect().width.toString());
item.setAttribute('height', item.getBoundingClientRect().height.toString());
item.style.width = null;
item.style.height = null;
});
}
},
jsPDF: { orientation: 'portrait', format: 'a4' }
};
setTimeout(() => {
const pdfElement = document.getElementById('contentToConvert');
html2pdf().from(pdfElement).set(options).save()
.catch((err) => this.errorHandlerService.handleError(err))
}, 100);

Answer 1

听起来您可能超过了浏览器的最大画布大小。这因浏览器(和浏览器版本)而异。试试这里的演示，看看你的浏览器的限制。如果你能找到两个有不同限制的浏览器(在我的桌面，Safari和Chrome有相同的限制，但FireFox的最大面积有点低——iPhone的区域在Safari中要低得多)，试着把你的比例降低到限制较大的那个，直到它成功，然后看看限制较低的那个是否失败。还有其他限制在您的浏览器(例如。最大堆大小)，这可能会发挥作用。如果是这样的话，我没有一个好的解决方案给你——让客户端重新配置他们的浏览器通常是不切实际的(而且这些限制大多很难)。由于显而易见的原因，浏览器不允许网站任意更改内存限制。如果你使用Node.js，你可能在处理内存限制方面更成功。无论哪种方式(Node或其他方式)，当您要突破客户端的极限时，有时最好将内容发送回服务器。