react-chartjs-2图表打印PDF生成大量空白页问题求助

• 修复Canvas打印尺寸溢出
  旧版本Chart.js（2.9.4）存在打印时canvas尺寸计算异常的问题，导致内容溢出触发多余空白页。在全局CSS中添加打印媒体查询，强制约束图表及容器的尺寸：

  @media print {
    canvas {
      max-width: 100% !important;
      height: auto !important;
      page-break-after: avoid;
      page-break-inside: avoid;
    }
    .chart-container {
      max-width: 100% !important;
      height: auto !important;
      overflow: hidden !important;
    }
  }
  

  注意.chart-container需替换为你实际包裹图表的父容器类名。

• 动态控制图表响应式配置
  打印前临时关闭图表的响应式缩放，避免打印布局下的异常尺寸拉伸：

  import { Line } from 'react-chartjs-2';
  import { useState } from 'react';
  
  const [printMode, setPrintMode] = useState(false);
  
  const handlePrint = () => {
    setPrintMode(true);
    // 延迟触发打印，确保图表重新渲染完成
    setTimeout(() => {
      window.print();
      setPrintMode(false);
    }, 200);
  };
  
  // 图表配置
  const chartOptions = {
    responsive: !printMode,
    maintainAspectRatio: true,
    width: printMode ? 800 : undefined,
    height: printMode ? 400 : undefined
  };
  
  return (
    <>
      <Line data={yourData} options={chartOptions} />
      <button onClick={handlePrint}>打印</button>
    </>
  );
  

• 打印前强制重绘图表
  通过图表引用触发resize重绘，确保canvas尺寸适配打印布局：

  import { Line } from 'react-chartjs-2';
  import { useRef } from 'react';
  
  const chartRef = useRef(null);
  
  const handlePrint = () => {
    if (chartRef.current) {
      chartRef.current.chartInstance.resize();
    }
    window.print();
  };
  
  return (
    <>
      <Line ref={chartRef} data={yourData} options={yourOptions} />
      <button onClick={handlePrint}>打印</button>
    </>
  );
  

• 升级依赖版本
  你当前使用的Chart.js和react-chartjs-2版本较旧，存在已知的打印兼容性bug。尝试升级到稳定版本（如Chart.js 3.x+、react-chartjs-2 4.x+），新版本修复了大量打印相关问题，但需注意适配新的API结构。

内容的提问来源于stack exchange，提问作者J.Lau