我在用 'recharts' 为我的项目创建图表,
和 '反应-pdf' 用于生成报告。
'Recharts' 使用时在 DOM 上创建一个 svg 并显示一个图表。
有没有办法我可以一起使用这两个,并添加我的 'recharts' 通过react-pdf 成为我的报告的组成部分?
例如 - 在一个<Document/>
tag.
React-pdf 网站链接 https://react-pdf.org/
重新图表链接到网站 https://recharts.org/en-US/
我看到了一个解决方案,可以将重新绘制的svg转png,保存到本地然后导入使用via<Image/>
React-pdf 中的组件。
寻找更直接的方法来解决这个问题。
我是这样解决的:
我用过这篇文章——https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf
建议使用html 到图像 https://www.npmjs.com/package/html-to-image包裹。
所以我给了 rechart 组件的容器一个 id,
并选择它docoument.getElementById()
。
然后,在查询 html-to-image 时使用所选的 id,如下所示 -
const response = await htmlToImage.toPng(myId);
然后响应包含一个 url,
它被用作react-pdf Image组件的src。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)