时间戳

首页 > 解决方案 > 将 React 组件转换为 PNG/PDF 的最佳库？

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

问题描述

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

应用程序.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>
        );
      }
}

图表.js

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

标签： javascriptreactjsreact-componentreact-chartjsreact-pdf

解决方案

我建议你id在你的 html 元素上添加一个（比如说topdf）：

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

然后您可以使用html2canvas库来获取图表的图像 dataURI。之后就可以使用jsPDF库制作文档并使用该.addImage(your_image_data_URI)功能了。

例子：

html2canvas(document.querySelector("#topdf"), { 
      scale: 3, // use the desired scale
      allowTaint: true,
      useCORS: true
    }).then(canvas => { 

      // Your IMAGE_DATA_URI
      var imgData = canvas.toDataURL('image/jpeg');

      // Make pdf
      var doc = new jsPDF({ options });

      // add image
      doc.addImage(imgData, 'JPEG');

      // Save document
      doc.save('charts.pdf'); 

      // ....

这仅适用于 Init 运行时或运行时之后。

推荐阅读