如何不渲染直接获取react-chartjs-2图表图片用于react-pdf？

别用react-chartjs-2的组件绕圈子了，直接用Chart.js核心库配合离线Canvas生成图片，完美避开react-pdf的渲染冲突，步骤如下：

1. 先装依赖

npm install chart.js canvas

2. 写个生成图表base64的工具函数

import { Chart, registerables } from 'chart.js';
import { createCanvas } from 'canvas'; // 纯浏览器环境直接用document.createElement('canvas')即可，无需这个包

// 注册Chart.js所需的全部组件
Chart.register(...registerables);

export async function makeChartImage(chartConfig) {
  // 创建Canvas实例并设置固定宽高
  const canvas = createCanvas(800, 400);
  const ctx = canvas.getContext('2d');

  // 禁用动画和响应式，避免离线环境下渲染不完整或尺寸混乱
  const finalConfig = {
    ...chartConfig,
    options: {
      ...chartConfig.options,
      animation: false,
      responsive: false,
    },
  };

  // 初始化图表
  new Chart(ctx, finalConfig);

  // 返回base64格式的图片地址
  return canvas.toDataURL('image/png');
}

3. 放到react-pdf中使用

import { Document, Page, Image } from '@react-pdf/renderer';
import { makeChartImage } from './chartUtils';
import { useState, useEffect } from 'react';

function MyPDF() {
  const [chartImg, setChartImg] = useState(null);

  useEffect(() => {
    // 预先生成图表图片
    const getChart = async () => {
      const chartData = {
        type: 'bar',
        data: {
          labels: ['一月', '二月', '三月'],
          datasets: [{
            label: '销售额',
            data: [120, 230, 180],
            backgroundColor: '#4BC0C0',
          }],
        },
      };
      const imgUrl = await makeChartImage(chartData);
      setChartImg(imgUrl);
    };
    getChart();
  }, []);

  if (!chartImg) return null;

  return (
    <Document>
      <Page>
        <Image src={chartImg} />
      </Page>
    </Document>
  );
}

export default MyPDF;

重点提醒 #

• 必须关闭动画和响应式：你之前遇到onComplete回调不触发的问题，就是因为离线环境无法正常执行动画逻辑，关闭动画后图表会直接渲染完成；固定尺寸能避免响应式带来的布局异常。
• 直接用Chart.js核心库：react-chartjs-2是封装后的React组件，和react-pdf的DOM环境存在冲突，绕开它直接用原生Chart.js才是解决问题的关键。
• 环境适配：纯浏览器端生成时，把createCanvas替换为document.createElement('canvas')即可；如果是服务端生成PDF（比如Next.js的API路由），则需要依赖canvas包提供的离线Canvas能力。

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