<p>html2canvas：在克隆的文档中查找 DIV 时出错</p>

当我尝试将画布存储在本地存储中并使用 React.js 链接到另一个页面时出现同样的问题

<Link to="/system">
            <button className="submitButton"  onClick={this.captureMap} >SUBMIT </button>
</Link>

   captureMap(){
      html2canvas(document.querySelector(".mapboxgl-canvas")).then(canvas => {
        // document.body.appendChild(canvas);
        var image = canvas;
        if(typeof localStorage !== "undefined"){
          localStorage.setItem('mapImg',image.toDataURL());
        }
      });
    }

面临同样的问题
const mainDom = document.createElement('div');
mainDom.appendChild(domElem[0].cloneNode(true)); // domElem 是一些 dom 对象

当我们将 mainDom 传递给 html2canvas 时，它显示以下错误。

html2canvas：在克隆的文档中查找 DIV 时出错
demo.html#/Demo/ Widget:1 Uncaught (in promise) 在克隆文档中找到 DIV 时出错

@HarishSonar你能在 jsfiddle 上复制这个问题吗？

现在已修复。
似乎我们无法将 dom 作为内存中的对象使用，它需要渲染。
添加 document.getElementsByTagName('BODY')[0].append(mainDom); 解决了我的问题。

只是我必须在处理 html2canvas 后处理删除 mainDom。

对于未来的访客，我也有同样的问题。

我最终克隆了 DOM 节点，将其作为document.body的第一个子节点插入，并使用 CSS 样式position: absolute; top: -16384px; width: ${originalElementWidth} 。 如果您需要在将 DOM 节点捕获为屏幕截图之前对其进行更改，这将非常有用。

另外， @niklasvh ，如果您还想https ://jsfiddle.net/bLwya8sf/1/

你好，我也遇到了这个问题。 当我触发 html2canvas 函数时，我项目中的所有请求都会被发送。 你能告诉我你的解决方案吗？非常感谢。 这是我的代码：
公共 downBtn(){
var targetDom = document.querySelector('#Box');
var copyDom = targetDom.cloneNode(true);
document.body.appendChild(copyDom);
html2canvas(copyDom).then(canvas => {
var imgData = canvas.toDataURL('image/jpeg');
var img = new Image();
img.src = imgData;
img.onload = 函数 () {
pdf.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
pdf.save('pdf_2.pdf');
};
copyDom.remove();
});

同样的问题：我不得不将我的 SVG 包装成一个 div 以避免这个问题......

同样的问题：我不得不将我的 SVG 包装成一个 div 以避免这个问题......

能说说怎么做吗？

现在已修复。
似乎我们无法将 dom 作为内存中的对象使用，它需要渲染。
添加 document.getElementsByTagName('BODY')[0].append(mainDom); 解决了我的问题。

只是我必须在处理 html2canvas 后处理删除 mainDom。

是的，我们必须使用渲染元素，而不是使用 dom 作为内存中的对象

同样的问题：我不得不将我的 SVG 包装成一个 div 以避免这个问题......

能说说怎么做吗？

当然！
我在这里做了
它可以在所有的浏览器，除了罚款在Internet Explorer 11的html2canvas方法不会呈现在最终的PDF什么...不知道，如果它的html2canvas问题或jsPDF一个...任何提示？
谢谢

现在已修复。
似乎我们无法将 dom 作为内存中的对象使用，它需要渲染。
添加 document.getElementsByTagName('BODY')[0].append(mainDom); 解决了我的问题。
只是我必须在处理 html2canvas 后处理删除 mainDom。

是的，我们必须使用渲染元素，而不是使用 dom 作为内存中的对象

为什么不直接使用 onclone 回调？ 这将允许您在渲染之前使用 documentClone 并对其进行更改。
例如，您有一个可滚动的表格、甘特图，并且您想要打印包含在 PDF 中可见的隐藏行的完整表格。

html2canvas(document.body, {
        onclone: function(documentClone) {
            // target elements you want to change on the "documentClone" object
        })
        .then(function(canvas) {
            // print canvas with e.g: jsPDF
        });
    };

我在这里解决了 IE11。