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

2024-01-05

我在用 '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(使用前将#替换为@)

如何将重新图表添加到react-pdf 的相关文章

随机推荐

  • ZF3 Bootstrap上的单元测试认证

    我在为我的设备运行单元测试时遇到问题IndexController class 单元测试仅执行以下操作 灵感来自zf3单元测试教程 https docs zendframework com tutorials unit testing yo
  • JavaScript 中 eval 的替代方案是什么?

    我有一些代码 看起来像这样 function StrippedExample i1 i2 i3 i4 i5 i6 i7 i8 this i for var i 1 j 0 i lt 9 i var k eval i i if k gt 0
  • 可迭代多次的Python名称

    我正在努力改进我的文档 我想说这个函数接受一个 collections Iterable 的东西 但是代码会迭代这个 iterable 多次 列表 太具体 而 可迭代 不起作用 因为某些可迭代只能迭代一次 事物有名字吗 可重复 多重迭代 您
  • 我可以将 SAML 应用程序与 Azure AD B2C 集成吗?

    我们当前的应用程序正在使用 SAML IdP 对用户进行身份验证 我们希望保留他们的 SAML 实现并使用 Azure AD B2C 更新应用程序的配置 而不是切换到 OAuth2 或 OpenID Connect Azure AD B2C
  • Google Drive 的 FileID 的格式是什么?我需要使用 API 查明新文件是否已上传到我的驱动器

    如果 FileID 遵循特定格式 例如新文件具有更高的值或更低的值 我可以跟踪旧值并查明我是否在驱动器中上传了新文件 格式为264位数字 bit 0 5 6 261 261 263 110101 256 RANDOM BITS 00 url
  • 新添加的列不可见

    我在本地主机上使用 xampp 我创建了一个表 然后对其进行了更改 在一段时间后又添加了一列 新添加的列在浏览表数据时是看不到的 但在看到表结构时是可见的 为什么我在表数据中看不到它 我使用的是xampp的便携式包 此外 与该列相关的查询运
  • 无法安全锁定 ConcurrentDictionary 的值

    我在锁定集合中的项目时遇到问题 特别是 ConcurrentDictionary 我需要接受一条消息 在字典中查找该消息 然后对其进行长时间的扫描 由于程序占用大量内存 扫描后对象返回true如果他们认为现在是删除它的好时机 我通过将其从词
  • Safari xhr拖放文件上传似乎发生了两次

    它可能与 Webfaction 配置有关 他们有 nginx 代理 我的应用程序是在 apache2 mod wsgi 下运行的 webpy 因为它在我的 devcherrypy 服务器中工作 以下是我用于上传的 javascript 代码
  • Rails 4.2:将 Deliver_later 与无表模型结合使用

    我正在尝试使用 Rails 4 2 的 Deliver later 方法设置联系表单 但是 我只能让 Deliver now 工作 因为 Deliver later 试图序列化我的对象 但每次都失败 这是我的设置 消息控制器 rb clas
  • 作曲家不会自动加载

    我按照作曲家的说明并成功安装了作曲家 我想使用 tumblr 的全新产品PHP API 客户端 https packagist org packages tumblr tumblr 我的文件夹结构 vendor composer json
  • 获取 2 个分隔符之间的第 n 个文本字符串

    我有一长串由字符 管道字符 分隔的文本 我需要获取第三个和第四个管道之间的文本 不知道该怎么做 对正则表达式或非正则表达式开放 以最有效的为准 如果不存在能够传入的扩展方法 则特别开放 分隔符 index If string textBet
  • XServer启动后运行shell脚本? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 如何在 XServer 和 lightdm 启动时运行 shell 脚本 我尝试在 etc 目录中使用 init d 和 rc local
  • python numpy 向量数学

    是什么numpy相当于euclid https pypi python org pypi euclid的 2d 向量类 操作 喜欢 euclid Vector2 到目前为止我有这个 创建两个向量 import numpy as np loc
  • 如何获取网格视图中隐藏字段的值?

    网格视图中隐藏字段的序号为 7 当我点击按钮时 string sValue HiddenField GridView1 SelectedRow Cells 7 FindControl HiddenField1 Value 给出错误 未将对象
  • Intel的Sandy Bridge CPU中TLB的大小是如何确定的?

    维基百科网页 https en wikipedia org wiki Sandy Bridge https en wikipedia org wiki Sandy Bridge 提到数据TLB对于4KB 2MB和1GB页面分别有64 32和
  • 扩展对象原型时出现 jQuery 错误

    如果我延长Object原型并尝试使用 jQuery 2 0 3 的一些功能我收到错误 For example jsFiddle http jsfiddle net 436Zq Object prototype GetHashCode fun
  • 如何在该类中创建该类实例的 const 数组?

    我正在创建我自己的 PHP 类 我想在该类的实例的该类中拥有恒定的引用 就像枚举一样 我不断收到 2 个错误 1 常量不能是数组 2 第11行解析错误 见下文 怎么了 我真的可以没有一个常量数组吗 我来自 Java 背景 这是我的代码 cl
  • 网页抓取不会从第 2 页循环到第 5 页

    我在用https www realtor com realestateagents phoenix az pg 2 https www realtor com realestateagents phoenix az pg 2作为我的起点 我
  • 将简单文本列日期转换为 SQL 中的日期

    我需要将这种类型转换为nvarchar列到日期 列中的数据F2看起来像这样 09222018 我想转换为日期并使其看起来像09 22 2018 我已经尝试过这个 但语法不正确 SELECT f2 CAST f2 AS datetime FR
  • 如何将重新图表添加到react-pdf

    我在用 recharts 为我的项目创建图表 和 反应 pdf 用于生成报告 Recharts 使用时在 DOM 上创建一个 svg 并显示一个图表 有没有办法我可以一起使用这两个 并添加我的 recharts 通过react pdf 成为