元素未附加到文档 html2canvas

Question

这个错误是什么意思？以及如何解决它

我尝试使用 html2canvas 将 html 数据转换为画布。

我的代码：

 html2canvas(ReactHtmlParser(pages[a])).then(function(canvas) {
     console.log(canvas);
 });

Answer 1

所以基本上你想要做的是从你的 react DOM 中获取一个canvas。

现在你应该做的是给html2canvas(normalHTMLDomFromJS)一个普通的DOM。

但你正在做的是将 reactDOM（至于 javascript 普通对象）传递给 html2canvas

Element is not attached to a document html2canvas 发生在您将 jsDOM 以外的内容传递给 html2canvas(shouldNotBeJSDOMToThrowError) 时，这意味着 ReactHtmlParser(pages[a]) 没有返回 js DOM（它返回的反应 DOM（类似于 {}））

我想你这样做是一个反应应用程序，所以你必须从你的元素中获得一个 ref 然后你可以从 ref.current 访问你的普通 js DOM

github issue

import React, { useRef } from "react";
import html2canvas from "html2canvas";
import ReactDOM from "react-dom";

function captureScreenshot(rootElem) {
    alert("Now.. Preparing Screenshot");
    console.log(rootElem);

    html2canvas(rootElem).then(canvas => {
        document.body.appendChild(canvas);
    });
}

function App(props) {
    const rootRef = useRef(null);
    const onClick = () => {
        const elements = rootRef.current;
        captureScreenshot(elements);
    };

    return (
        <div ref={rootRef}>
            <h2 style={{ color: "pink" }}>bla bla bla</h2>
            <button onClick={onClick}>ScreenShot</button>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));