如何将图表添加到react-pdf

问题描述

我正在使用“recharts”为我的项目创建图表， 和“react-pdf”用于生成报告。 'Recharts' 在使用 DOM 时会在 DOM 上创建一个 svg 并显示一个图表。

有没有办法将这两者结合使用，并通过 react-pdf 将我的“recharts”组件添加到我的报告中？ 例如 - 在 <Document/> 标签内。

react-pdf link to website

recharts link to website

我看到了一种解决方案，它可以将 rechart 的 svg 转换为 png，将其保存在本地，然后将其导入并通过 react-pdf 中的 <Image/> 组件使用。

正在寻找更直接的方法来解决这个问题。

解决方法

这是我解决它的方法： 我用过这篇文章- https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf

建议使用 html-to-image 包。

所以我给了 rechart 组件的容器一个 id， 并使用 docoument.getElementById() 选择它。 然后，在查询 html-to-image 时使用选定的 id，就像这样 -

  const response = await htmlToImage.toPng(myId);

然后响应包含一个网址， 它被用作 react-pdf Image 组件的 src。