在 React 应用程序中使用 html-to-image 的问题

Question

我正在尝试使用 html-to-image 创建特定 html 卡的可下载图像。在其文档中指定使用

var node = document.getElementById('my-node');
htmlToImage.toPng(node)...

但这适用于真实 DOM 而不是反应。我尝试使用 refs 但没有结果。卡片和下载按钮位于 Component Hierarchy 的不同分支中。

Answer 1

您是否尝试过使用新的 React Ref

    class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

为了访问元素，使用：

const node = this.myRef.current;

在 React 应用程序中使用 html-to-image 的问题

Problems using html-to-image in a React application

javascript

dom

wkhtmltoimage

reactjs