问题描述
我正在尝试使用 html2pdf 在我的 html 中制作合理数量的文本和图形的 PDF。到目前为止一切顺利，PDF 制作完成，看起来不错。它大约有 20 页。 但是，缺少多个图形。一些相关信息：
- 大部分缺失的图表都在文档的末尾。然而，最终的图形是渲染的，所以它在最后不是一个明确的截止
- 图表附带的文字在那里，但图表本身没有
- 缺失的图形都是相同的类型。这种类型的其他图形被渲染并且看起来很好。好像不是类型的问题
- 如果我将 html2canvas 配置的比例缩小到大约 0.8，每个图形都会被渲染（但当然质量会降低）。我希望比例为 2。
缩放会影响它们是否被渲染的事实，让我觉得像时间/超时之类的东西在这里是一个问题。更大的比例显然意味着更长的渲染时间，但它似乎并没有等待它完成。或者类似的东西。
在制作 PDF 的大部分代码下方。 onClone 是正确渲染图形所必需的。如果去掉，还是会出现上面描述的问题（只是渲染出来的图很难看）
const options = {
filename: 'test.pdf',margin: [15,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);
解决方法
听起来您可能超出了浏览器的最大画布尺寸。这因浏览器（和浏览器版本）而异。尝试 here 中的演示以检查浏览器的限制。如果您能找到 2 个具有不同限制的浏览器（在我的桌面上，Safari 和 Chrome 具有相同的限制，但 FireFox 中的最大区域要小一些 - Safari 中的 iPhone 区域要低得多），请尝试使用更大的限制，直到成功，然后查看是否在具有较低限制的那个上失败。您的浏览器中还有其他限制（例如最大堆大小）可能会起作用。如果是这种情况，我没有适合您的解决方案 - 让客户端都重新配置他们的浏览器通常是不切实际的（而且大多数这些限制无论如何都很难）。出于显而易见的原因，浏览器不允许网站对内存限制进行任意更改。如果您使用 Node.js，您可能会在处理内存限制方面取得更大的成功。无论哪种方式（Node 或其他方式），有时最好在突破客户端的限制时将内容发送回服务器。