1

我正在尝试使用 html2canvas 将一大块 html 转换为图像数据，以便我可以轻松地将其添加到 pdf 中。我注意到，当 html2canvas foreignObjectRendering 选项设置为 true 时，作为 SVG foreignObjects 的少数 html 在 pdf 中呈现的效果更接近于它们的实际外观，但其他一切看起来都非常错误。自然地，我希望对 html2canvas 进行两次单独的调用，一次调用未为主要的 html 块设置 foreignObjectRendering 选项，另一次将选项设置为 true 用于少数讨厌的 foreignObjects，这将是一个可行的解决方案。我决定从 DOM 中删除 foreignObjects，完成第一次渲染并将主要块添加到 pdf，然后将 foreignObjects 添加回 DOM，然后将它们传递给 html2canvas。当我尝试在重新添加的 foreignObjects 上调用 html2canvas 时，

无法在克隆的 iframe 中找到元素

以下是相关代码的概要：

let chunkToRender = document.querySelector('div.wrapper') as HTMLElement;
let pdf = new jsPDF("p", "mm", "a4");

const foreignObjects: Array<any> = [];
  chunkToRender.querySelectorAll('foreignObject').forEach(fo => {
    foreignObjects.push({parent: fo.parentNode, child: fo.parentNode?.removeChild(fo)});
  })
  async function addPDFPiece(targetElem: HTMLElement) {
    await html2canvas(targetElem, {foreignObjectRendering: targetElem.nodeName === 'foreignObject'})
    .then(canvas => {
      let imgData = canvas.toDataURL("image/jpeg",1);
      const imageWidth = canvas.width;
      const imageHeight = canvas.height;
      const ratio = imageWidth / imageHeight >= pageWidth / pageHeight ? pageWidth / imageWidth : pageHeight / imageHeight;
      const x = targetElem.getBoundingClientRect().x * ratio;
      const y = targetElem.getBoundingClientRect().y * ratio + 15;
      const w = !isNaN(imageWidth * ratio) ? imageWidth * ratio : 1;
      const h = !isNaN(imageHeight * ratio) ? imageHeight * ratio : 1;
      pdf.addImage(imgData, 'JPEG', x, y, w, h);
    })
  }
  await addPDFPiece(chunkToRender);
  for (let fo of foreignObjects) {
    fo.parent?.appendChild(fo.child);
    console.log(fo.child); // This prints the correct foreignObject...
    await addPDFPiece(fo.child);
    // Error occurs here ^^^^, when html2canvas is initialized
  }
  pdf.save(filename);

有什么方法可以实现我想要做的吗？

4

0 回答 0