如何将 recharts 添加到 react-pdf
How to add recharts to react-pdf
我正在使用“recharts”为我的项目创建图表，
和 'react-pdf' 用于生成报告。
'Recharts' 在使用时在 DOM 上创建一个 svg 并显示一个图表。
有什么方法可以同时使用这两者，并通过 react-pdf 将我的“recharts”组件添加到我的报告中？
例如 - 在 <Document/> 标签内。
我看到了一个解决方案，可以将 rechart 的 svg 转换为 png，将其保存在本地，然后导入并通过 <Image/> 组件在反应中使用- pdf.
寻找更直接的方法来解决这个问题。
我是这样解决的：
我用过这篇文章-
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);
响应随后包含 url，
用作 react-pdf Image 组件的 src。
我正在使用“recharts”为我的项目创建图表， 和 'react-pdf' 用于生成报告。 'Recharts' 在使用时在 DOM 上创建一个 svg 并显示一个图表。
有什么方法可以同时使用这两者，并通过 react-pdf 将我的“recharts”组件添加到我的报告中？
例如 - 在 <Document/> 标签内。
我看到了一个解决方案，可以将 rechart 的 svg 转换为 png，将其保存在本地，然后导入并通过 <Image/> 组件在反应中使用- pdf.
寻找更直接的方法来解决这个问题。
我是这样解决的： 我用过这篇文章- 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);
响应随后包含 url， 用作 react-pdf Image 组件的 src。