Javascript 将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元素上添加一个id，比如topdf：

呈现{return}。 然后，您可以使用该库获取图表的图像数据URI。 之后，您可以使用库生成文档并使用.addImageyour\u image\u data\u URI函数

例如：

html2canvasdocument.querySelectortopdf，{ 比例：3，//使用所需的比例 allowTaint:是的， 乌塞科尔斯：是的 }.thencanvas=>{ //您的图像\u数据\u URI var imgData=canvas.toDataURL'image/jpeg'； //制作pdf var doc=新jsPDF{options}； //添加图像 addImageimgData文件，“JPEG”； //保存文档 doc.save'charts.pdf'； // ....

---

这只能在运行时或运行后使用。

将任意React组件呈现为PNG或PDF与呈现Chart.js图表完全不同。您搜索过Chart.js export PNG吗？它的API文档包括.toBase64Image函数。提供的信息不多。不需要太多文档因为您从该函数中获得了一个标准的data:URI。@AKX-exact，如果您可以获得base64字符串，那么接下来可以调用jsPDF库并将图像添加到pdf文档中。我试图建议您在画布渲染{return}上添加和标识topf。现在，如果您在chrome上检查应用程序，例如F12，您可以选择canvas元素并看到它获取id。从中，您可以创建一个函数toPDF并使用如下html2canvasdocument.querySelectortopdf，{….但是如上所述，如果你的API有一个.tobase64图像，这个函数返回一个编码的base64字符串，其中包含图表的png/jpeg编码。有了这个base64字符串，你不需要使用html2canvas。你可以直接使用jsPDF和.addImageTheBase64字符串哇..这是一个非常好的解释，它让我开始了Works。你能修改你的主要答案让我接受吗？html2canvas对我有效，但是的，我也想利用png文件。我得到了编码字符串，但由于某些原因，当我尝试在chrome上打开URI时，它给了我一个完整的黑屏。此外，html2canvas给出了一个基于当前浏览器的图形解决方案大小。与网页相比，它没有生成清晰的pdf。是否有任何高级选项可以让pdf更清晰？