如何将重新图表添加到react-pdf

Question

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

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

React-pdf 网站链接

重新图表链接到网站

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

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

Answer 1

这是我解决问题的方法：我使用了这篇文章 - https://betterprogramming.pub/heres-why-im-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);

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