如何将图表添加到 react-pdf答案

【问题标题】：How to add recharts to react-pdf如何将图表添加到 react-pdf
【发布时间】：2021-07-20 23:28:54
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

推荐使用html-to-image包。

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

  const response = await htmlToImage.toPng(myId);

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

【讨论】：

当你说包含一个 url 时，你是把它保存在某个地方还是 PDF 处理了 dame/png blob？我现在正在尝试，并且已经生成了一个 blob（所以我在浏览器上有可用的图像，但 PDF 忽略了它。
错字：data:image/png;base64
来自 htmlToImage 的响应有一个 url。我将 url 推送到本地数组状态。然后，使用属于 react-pdf 的 Image 组件的 url
感谢您的回复。我发现这是因为我没有等待图像回调，所以我在图像存在之前生成了 PDF。所以它现在有效。再次感谢。