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

问题描述

我已经看了很多遍，但似乎找不到这两个库一起使用的任何示例。我的项目目前使用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以便嵌入到文档中...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）