Question

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

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

提供的元素不在文档
中

以下是我在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);
});

发票元素确实存在于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>
    }
}

提供的元素不在Document - Reactjs中

1 个答案: