React-ChartJS-2 Bar组件无法在PDFViewer中渲染的问题咨询

问题根源 #

@react-pdf/renderer运行在非浏览器环境（Node.js或模拟环境），没有浏览器提供的Canvas上下文，而react-chartjs-2的Bar组件依赖浏览器Canvas API，直接渲染会因无法获取上下文报错。

实现步骤 #

1. 安装依赖
   安装chartjs-node-canvas，它能在Node环境生成Chart图表的图片：

   npm install chartjs-node-canvas
   # 或 yarn add chartjs-node-canvas
   

2. 编写图表生成函数
   创建函数，用chartjs-node-canvas生成Bar图表的Base64格式图片：

   const { CanvasRenderService } = require('chartjs-node-canvas');
   
   const width = 600;
   const height = 400;
   
   async function generateBarChartBase64() {
     const canvasRenderService = new CanvasRenderService(width, height, (Chart) => {
       // 需注册Chart.js插件的话，在此处添加
     });
   
     // 图表配置（和官方示例一致）
     const config = {
       type: 'bar',
       data: {
         labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
         datasets: [{
           label: '# of Votes',
           data: [12, 19, 3, 5, 2, 3],
           backgroundColor: [
             'rgba(255, 99, 132, 0.2)',
             'rgba(54, 162, 235, 0.2)',
             'rgba(255, 206, 86, 0.2)',
             'rgba(75, 192, 192, 0.2)',
             'rgba(153, 102, 255, 0.2)',
             'rgba(255, 159, 64, 0.2)'
           ],
           borderColor: [
             'rgba(255, 99, 132, 1)',
             'rgba(54, 162, 235, 1)',
             'rgba(255, 206, 86, 1)',
             'rgba(75, 192, 192, 1)',
             'rgba(153, 102, 255, 1)',
             'rgba(255, 159, 64, 1)'
           ],
           borderWidth: 1
         }]
       },
       options: {
         scales: {
           y: { beginAtZero: true }
         }
       }
     };
   
     return await canvasRenderService.renderToDataURL(config);
   }
   

3. 在PDF组件中渲染图片
   在PDF文档组件中异步获取Base64图片，用@react-pdf/renderer的Image组件渲染：

   import React, { useState, useEffect } from 'react';
   import { Document, Page, Image, PDFViewer } from '@react-pdf/renderer';
   import generateBarChartBase64 from './generateBarChart';
   
   const PDFDocument = () => {
     const [chartImage, setChartImage] = useState(null);
   
     useEffect(() => {
       (async () => {
         const base64 = await generateBarChartBase64();
         setChartImage(base64);
       })();
     }, []);
   
     if (!chartImage) return null;
   
     return (
       <Document>
         <Page size="A4">
           <Image src={chartImage} style={{ width: '100%' }} />
         </Page>
       </Document>
     );
   };
   
   const App = () => (
     <div>
       <PDFViewer style={{ width: '100%', height: '800px' }}>
         <PDFDocument />
       </PDFViewer>
     </div>
   );
   
   export default App;
   

注意事项 #

• 动态数据可作为参数传入generateBarChartBase64函数。
• 调整width和height控制图表清晰度与尺寸，适配PDF页面。
• 如需使用Chart.js插件，在CanvasRenderService的回调中注册，例如：

  const canvasRenderService = new CanvasRenderService(width, height, (Chart) => {
    Chart.register(require('chartjs-plugin-datalabels'));
  });
  

内容的提问来源于stack exchange，提问作者Gerome Tahud