如何解决如何将图表添加到react-pdf
我正在使用“recharts”为我的项目创建图表， 和“react-pdf”用于生成报告。 'Recharts' 在使用 DOM 时会在 DOM 上创建一个 svg 并显示一个图表。
有没有办法将这两者结合使用，并通过 react-pdf 将我的“recharts”组件添加到我的报告中？
例如 - 在 <Document/> 标签内。
我看到了一种解决方案，它可以将 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。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。