提供的元素不在文档中 - Reactjs

Question

我正在尝试将 HTML 发票作为图片发送给用户。

为此，我正在使用 html2canvas 库，但它不断给我错误：

Provided element is not within a Document

这是我在 componentDidMount() 中尝试做的事情

html2canvas(document.getElementById('invoice'), {
        logging: true,
        profile: true,
        useCORS: true}).then(function(canvas) {
    var data = canvas.toDataURL('image/jpeg', 0.9);
    var src = encodeURI(data);
    console.log(src);
});

invoice 元素确实存在于 DOM 中。

有什么问题吗？

Answer 1

也许尝试用 refs 捕获元素。

因此您的组件将如下所示：

class Invoice extends React.Component {
    componentDidMount(){
        html2canvas(this.invoice, {
                logging: true,
                profile: true,
                useCORS: true}).then(function(canvas) {
            var data = canvas.toDataURL('image/jpeg', 0.9);
            var src = encodeURI(data);
            console.log(src);
        });
    }
    render(){
        return <div ref={r => this.invoice = r}>....</div>
    }
}

提供的元素不在文档中 - Reactjs

Provided element is not within a Document - Reactjs

javascript

npm

html2canvas

reactjs