Блог

В чем смысл этой ошибки? и как это исправить

Я пытаюсь преобразовать данные html в холст с html2canvas помощью .

мой код:

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

Итак, в основном, что вы хотите сделать, это получить a canvas из вашего react DOM.

Теперь, что вам нужно сделать, это предоставить обычный DOM html2canvas(normalHTMLDomFromJS) .

Но то, что вы делаете, это передать ReactDOM (который является простыми объектами javascript) в html2canvas

Element is not attached to a document html2canvas происходит, когда вы передаете что-то, кроме jsDOM html2canvas(shouldNotBeJSDOMToThrowError) , что означает, что ReactHtmlParser(pages[a]) это не возвращает js DOM (его возвращающий react DOM(что-то вроде {}))

Я полагаю, вы делаете это с помощью приложения react, поэтому вы должны получить a ref из своего элемента, затем вы можете получить доступ к своему обычному js DOM из ref.current

проблема с github

 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"));