根据 html2canvas (html2pdf) 中的比例丢失图像

Question

我正在尝试使用 html2pdf 在我的 html 中制作合理数量的文本和图形的 PDF。到目前为止一切顺利，PDF 制作完成，看起来不错。它大约有 20 页。但是，缺少多个图形。一些相关资料：

• 大多数缺失的图表都在文档的末尾。然而，最终的图形是渲染的，所以它在最后不是一个明确的切断
• 图表随附的文字在那里，但图表本身没有
• 缺失的图形都是相同的类型。这种类型的其他图形被渲染并且看起来很好。好像不是类型的问题
• 如果我将 html2canvas 配置的比例减少到大约 0.8，每个图形都会被渲染（但质量当然会降低）。我希望比例为 2。

缩放会影响它们是否被渲染，这一事实让我觉得时间/超时之类的东西在这里是一个问题。更大的比例显然意味着更长的渲染时间，但它似乎没有等待它完成。或类似的东西。

下面是制作 PDF 的大部分代码。onClone 是正确渲染图形所必需的。如果去掉了，还是会出现上面描述的问题（但是渲染出来的图很难看）。

    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

听起来您可能超出了浏览器上的最大画布大小。这因浏览器（和浏览器版本）而异。尝试这里的演示来检查您的浏览器的限制。如果您可以找到 2 个具有不同限制的浏览器（在我的桌面上，Safari 和 Chrome 具有相同的限制，但 FireFox 中的最大区域要低一些 - iPhone 中 Safari 中的区域要低得多），请尝试将比例缩小到带有较大的限制，直到成功，然后看看在较低的限制上是否失败。您的浏览器中还有其他限制（例如最大堆大小）可能会发挥作用。如果是这种情况，我没有一个好的解决方案给你 - 让客户端全部重新配置他们的浏览器通常是不切实际的（而且大多数限制无论如何都很困难）。出于显而易见的原因，浏览器不允许网站对内存限制进行任意更改。如果您使用 Node.js，您可能会更成功地处理内存限制。无论哪种方式（Node 或其他方式），当您突破客户端的限制时，有时最好将内容发送回服务器。