如何使用 html2canvas 呈现包含 SVG foreignObject 的 HTML？

问题描述

我正在尝试使用 html2canvas 将一大块 html 转换为图像数据，以便我可以轻松地将其添加到 pdf 中。我注意到当 html2canvas foreignObjectRendering 选项设置为 true 时，作为 SVG foreignObjects 的几段 html 在 pdf 中更接近于它们的实际外观，但其他一切看起来都非常错误。自然地，我希望对 html2canvas 进行两次单独的调用，一次对 html 的主要块未设置 foreignObjectRendering 选项，另一次为少数讨厌的外来对象设置为 true 选项，这将是一个可行的解决方案。我决定从 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);

有什么方法可以实现我的目标吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）