Блог

Я немного осмотрелся, но, похоже, не могу найти никаких примеров совместного использования этих 2 библиотек. В настоящее время мой проект использует 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 amp;amp; 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. Кажется, я не могу понять, как преобразовать их в PDF с помощью библиотеки react-pdf. Есть ли библиотека, которая лучше подходила бы для этой задачи?

Единственное решение, которое я могу придумать, — использовать ссылки для захвата элементов canvas каждой диаграммы, а затем использовать jsPDF для преобразования их в imgs для встраивания в документ…