html2canvas - 错误：元素未附加到文档答案

【问题标题】：html2canvas - error: Element is not attached to a Documenthtml2canvas - 错误：元素未附加到文档
【发布时间】：2021-11-07 00:14:44
【问题描述】：

我有两个功能。

function test() {
    // Get the element.
    var element = document.getElementById('container');

    // Generate the PDF.
    html2pdf().from(element).set({
        margin: 1,
        foreignObjectRendering: true,
        filename: 'test.pdf',
        html2canvas: { scale: 2 },
        jsPDF: {orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true}
    }).save();
}

$(function() {
    $("#btnSave").click(function() {
        html2canvas($("#container"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image
                Canvas2Image.saveAsPNG(canvas);
                $("#img-out").append(canvas);
                // Clean up
                //document.body.removeChild(canvas);
            }
        });
    });
});

还有一个 div

<div id="container" style="width: 1000px; height: 500px; background-color: #1b5c72;">
    <div onclick="doSomething(event, this); changeColor(event, this)"  class="magnet" style="display: inline-block;">
        <object   class="123" style="pointer-events: none"  width="200"
                height="300"
                type="image/svg+xml"
                data="images/tiles/a4-vertical.svg">
        </object>
 </div>
    <div style="background-color: red; width: 100px; height: 100px;"></div>
</div>

我无法在第二个函数中将 div 转换为画布，也无法在第一个函数中制作好的 pdf。不要出现在画布和pdf中。我只看到空的主 div 和没有 svg 的小红色 div。
html2canvas 不适用于<object>？

【问题讨论】：

标签： javascript html html2canvas

【解决方案1】：

所以我不是很精通 JQuery，因为我是 React 从属，但是当我在我的 React 应用程序中实现 html2canvas 时，我遇到了这个确切的错误。我可以通过 2 种方式修复此错误：

1：

const holder = document.createElement("div")
holder.innerHTML=<>My Content</>
//for the following code, you can append it anywhere then just delete it once you're done
document.body.appendChild(holder)
html2canvas(holder).then(canvas => {
    document.body.appendChild(canvas)
});

2：如果您想使用 querySelector 或其他需要已安装组件的选择器，那么只需执行以下操作

<button onClick={()=>{
    const holder=document.querySelector(".my-class")

    //allowTaint:true saves images too
    html2canvas(holder,{allowTaint:true}).then(canvas => {
        document.body.appendChild(canvas)
    });
}}>HTML2Canvas</button>

【讨论】：

Karl，出于好奇，因为我在使用 useRef 时在 React 中遇到了这个问题（未捕获（承诺）错误：元素未附加到文档） - 你将如何在 React 中实现这个？（这是 html2canvas）
@ChristinaStebbins 为了使用 useRef，您必须将它添加到组件中。我还喜欢使用 useEffect 来确保我的 useRef 已设置（初始化时将为 null）。最后，您需要执行 ref.current 来操作和使用您的 useRef。对我来说最简单的方法是这样的： import React, {useRef, useEffect} from 'react' const myRef=useRef() useEffect(()=>{ if(myRef.current==null)return myRef.current .innerHTML='some text' myRef.current.style.color='red' },[myRef]) return
如果可以，请尝试阅读 React 文档。