javascript - 提供的元素不在文档中 - 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>
    }
}