将React组件转换为PNG / PDF的最佳库？

问题描述

我已经实现了一个React Web应用程序，该应用程序使用Chart.js库创建了图表。现在，我想将此图表转换为PNG / PDF格式并保存。我遇到了很多图书馆，但是它们都面临着某些或其他问题。您能建议哪个图书馆最适合这种工作吗？

App.js

class CreateChart extends Component {
// call to get chartData object
    render() {
        return (
          <div className="App">
            <header className="App-header">
              REACT CHARTS
            </header>
                <CreateChart chartData={this.state.chartData} />
          </div>
        );
      }
}

Chart.js

class CreateChart extends Component {
    componentDidMount() {
            this.myChart = new Chart(
                this.chartRef.current,this.props.chartData
            );
    }
    
    render() {
           return <canvas ref={this.chartRef} />
    }
}

解决方法

我建议您在html元素上添加一个+（比如mapreduce(sqrt,+,xs)）：

id

然后，您可以使用html2canvas库获取图表的图像dataURI。 之后，您可以使用jsPDF库制作文档并使用topdf函数。

示例：

render() { return <canvas id="topdf" ref={this.chartRef} /> }}.

这仅在Init运行时或运行后有效。