使用react-pdf和react-chartjs-2生成pdf

2024-01-05

我环顾四周,但似乎找不到任何一起使用这两个库的示例。我的项目当前使用react-pdf 生成pdf 报告,但我需要将chartjs 图表添加到我们将生成的一些新文件中。我不想使用两个不同的 pdf 库,也不必重新编码应用程序的某些部分以匹配 2 个标准。如果有一个不同的库可以完成工作,我将愿意接受建议。

我尝试转换的页面具有如下结构:

<section className={classes.dashboardContainer}>
          <PerfectScrollbar>
            <Grid container classes={{ root: classes.dashboardDetails }}>
              <Grid item xs={12} lg={8} classes={{ root: classes.dashboardDetailsLeft }}>
                <ChartOne
                  isLoading={isLoading}
                  totalItems={state && state.chartOneData}
                />

                <ChartTwo
                  isLoading={isLoading}
                  data={metrics ? chartTwoData : undefined}
                />

                <ChartThree
                  isLoading={isLoading}
                  data={metrics ? chartThreeData: undefined}
                />

                <ChartFour
                  isLoading={isLoading}
                  data={metrics ? chartFourData : undefined}
                />
              </Grid>
            </Grid>
          </PerfectScrollbar>
        </section>

图表组件内部有几种不同类型的图表,下面是一个示例:


            <section className={classes.barChartContainer}>
              <div>
                <HorizontalBar
                  data={chartData}
                  height={50}
                  options={chartOptions({ beginAtZero: true, stacked: true, xAxesMax })}
                />
              </div>
            </section>

这只是来自react-chartjs-2库的barCharts。我似乎不知道如何使用react-pdf 库将它们转换为PDF。有没有一个库可以更好地完成这项任务?

我能想到的唯一解决方案是使用 refs 获取每个图表的画布元素,然后使用 jsPdf 将它们转换为 imgs 以嵌入到文档中...


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用react-pdf和react-chartjs-2生成pdf 的相关文章

随机推荐

  • android OnkeyListener 与过滤器停止 onItemClicklistener 来自 DPAD

    This is my custom dialog layout 我想移动日期选择器并在其下方的网格中加载相应的项目 我可以通过过滤器执行它 如上所述here https stackoverflow com questions 3802887
  • WEB-INF 是否在 CLASSPATH 中?

    Is the WEB INF文件夹中的CLASSPATHJava Web 应用程序 我假设你指的是 WEB INF 目录在 Web 应用程序文件夹结构的根目录中 不 它不在类路径中 WEB INF classes虽然在类路径上 但 JAR
  • 在 UML 中对基于时间的属性和方法进行建模

    我想对一个在指定时间过去时发生的方法和一个随类和序列图消失的属性进行建模 情况是这样的 工人们正在工厂里使用机器工作 每台机器可供0 10名工人使用 每台机器都有一个修理期限 工人必须修理它 它还有一个时间限制 如果工人错过修理 机器就会爆
  • 什么属性控制 Spinner 下拉背景?

    我有一个创建的自定义主题这个发电机 http android holo colors com 它有一个我不喜欢的旋转器自定义样式 我想更改背景可绘制对象 但我似乎无法弄清楚哪个属性控制它 这就是主题版本的样子 这是使用 Holo Light
  • 给定引理和标记,如何逆向词形还原过程?

    一般来说 在自然语言处理中 我们想要得到一个token的引理 例如 我们可以使用 wordnet 词形还原将 eaten 映射到 eat python中有没有可以将引理反演为某种形式的工具 例如 给定目标形式 吃 我们将 去 映射到 消失
  • css:chrome 的 -moz-线性渐变 相当于什么

    我有类似的CSSbackground moz linear gradient center top 59a1d8 27247D repeat scroll 0 0 0f78c7 对于我的按钮来说 这对我来说在 mozilla 中很好 但在c
  • Spring 中 REST 控制器的异常处理程序

    我想处理异常 以便 URL 信息自动显示给客户端 是否有捷径可寻
  • Utf8Json根据标记字段反序列化为类型

    With Json NET Newtonsoft我已成功使用自定义合约反序列化器和 json 转换器来根据标签选择反序列化器 在下面的情况下 ev 总之我希望实现同样的目标Utf8Json 完整详细信息如下 Stocks TRADE ev
  • IntelliJ Scala 配置问题

    所以 我下载了 Scala 并配置了路径 我可以从终端运行 Scala 控制台 Scala 插件已安装并且 你好世界 正在运行 问题是 当我编写 hello world 程序时 object First def main args Arra
  • 使用 Hive、S3、EMR 和恢复分区加载数据

    SOLVED 请参阅下面的更新 2 了解此问题的 解决方案 在 s3 中 我有一些 log gz 文件存储在嵌套目录结构中 例如 s3 BUCKET y 2012 m 11 d 09 H 10 我正在尝试使用多级分区规范将它们加载到 Ela
  • 创建本地和实例对象时出现 java StackOverflowError

    大家好 有人可以解释一下为什么这段代码会给我 StackOverflowError 错误吗 如果您能解释 instanceObj 初始化并调用 ObjectTest 构造函数和 java lang Object 构造函数时发生的情况 我真的
  • 在python中将具有多个值的字典键映射到json

    我正在尝试将一个具有多个值的键的字典映射到 python 中 这是我得到的 import json list abe matt roscoe key name nodes nodes setdefault key list abe matt
  • 如何为 ASP.NET MVC2 母版页提供独立于控制器的模型

    我在 ASP NET MVC2 下使用强类型视图和 autofac 进行依赖注入 并且尝试通过依赖注入获取通用动态标头 IE 我希望这种情况发生 即使视图已经存在 也不必离开该内容 我希望避免容器的静态发现和手动解析 但我找不到一种方法来轻
  • 结合 Knockout.js + KendoUI - 您的经验是什么?

    所以我看到 KendoUI 包含了与 Knockout js 集成的示例 http demos kendoui c om web integration index html http demos kendoui com web integ
  • 当用户选择不购买iOS应用内购买中的商品时,如何自定义错误处理?

    例如 当用户在应用内购买过程中要求登录时 他们可以单击 取消 按钮 然后应用程序将鞋 Can t connect to the iTunes Store 是否可以使用我们自己的回调来代替这个标准消息 我相信您不会收到 无法连接到 iTune
  • 从 App Engine 发送 HTTP 请求

    是否可以从我的 AppEngine 应用程序发送 HTTP 请求 我需要提出一些请求并从其他站点提取一些数据 是的 更多信息请点击这里 http code google com appengine docs python urlfetch
  • 添加 LTV 签名后,某些 pdf 文件已损坏

    我正在尝试在数字签名文档中添加 LTV 在某些文件中 它工作正常 但在某些文件中 它不起作用 我附上所有文件以供参考 我的 LTV 添加代码链接如下https github com akr pdftimestamp https github
  • 上下文包与完成通道以避免 goroutine 泄漏

    有两种不同的方法来清理 goroutine 使用kill 通道来发出取消信号 并使用done 通道来指示goroutine 已终止 type Worker struct Done chan struct Kill chan struct J
  • Tesseract 不使用路径变量

    为什么我的 Tesseract 实例要求我显式设置数据路径 但不想读取环境变量 让我澄清一下 运行代码 ITesseract tesseract new Tesseract String result tesseract doOCR myI
  • 使用react-pdf和react-chartjs-2生成pdf

    我环顾四周 但似乎找不到任何一起使用这两个库的示例 我的项目当前使用react pdf 生成pdf 报告 但我需要将chartjs 图表添加到我们将生成的一些新文件中 我不想使用两个不同的 pdf 库 也不必重新编码应用程序的某些部分以匹配