javascript - 缺少图像取决于 html2canvas (html2pdf) 中的比例

Question

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

大多数缺失的图表都在文档的末尾。但是，最终的图形是渲染的，所以它不是在末尾的显式 chop

图表附带的文字在那里，但图表本身不是

缺失的图表都是同一类型。这种类型的其他图表被渲染并且看起来很好。

类型似乎没有问题

如果我将 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

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