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

Question

我已经实现了一个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} />
}
}

Answer 1

我建议您在html元素(比如topdf(上添加一个id：

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

然后，您可以使用html2canvas库来获取图表的图像数据URI。之后，您可以使用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'); 
// ....

这只能在运行时单元或运行后工作。