Using react-pdf with react-chartjs-2 to generate a pdf

问题

I've looked around quite a bit but I can't seem to find any examples of the use of these 2 libraries together. My project currently uses react-pdf to generate pdf reports but I need to add chartjs charts to some of the new files we'll be generating. I would prefer not to have to use two different pdf libraries and have to re-code parts of the application to match 2 standards. If there is a different library that can get the job done I would be open to suggestions.

The page I am trying to convert has a structure like this:

<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>

Inside the chart components there are a few different types of charts below is an example:


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

it's all just barCharts coming from the react-chartjs-2 library. I can't seem to figure out how to convert these to PDF using the react-pdf library. Is there a library that would work better for this task?

The only solution I can think of is to use refs to grab the canvas elements of each chart and then use jsPdf to convert those to imgs to embed in the doc...

来源：https://stackoverflow.com/questions/63907233/using-react-pdf-with-react-chartjs-2-to-generate-a-pdf

标签

reactjs

pdf

react-pdf

react-chartjs-2