如何解决如何使用 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 举报,一经查实,本站将立刻删除。