3

我环顾四周，但似乎找不到任何一起使用这两个库的示例。我的项目目前使用 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 以嵌入到文档中......

4

0 回答 0