React项目中如何将Highcharts图表转为PNG/JPG Buffer用于react-pdf导出PDF？

核心思路 #

由于react-pdf仅支持PNG/JPG格式的图片，我们需要将Highcharts生成的SVG先转换为Canvas，再提取出base64格式的图片（或Blob），最终传入react-pdf的Image组件中。

具体实现方案 #

方案一：使用第三方库dom-to-image（推荐）

这个库专门处理DOM元素转图片，对SVG的兼容性较好，无需手动处理Canvas细节。

1. 安装依赖

npm install dom-to-image
# 或
yarn add dom-to-image

2. 转换图表并导出PDF

import domtoimage from 'dom-to-image';
import { Document, Page, View, Image, BlobProvider } from '@react-pdf/renderer';

// 定义PDF文档组件
const ChartPdfDocument = ({ chartImageUrl }) => (
  <Document>
    <Page size="A4" style={{ padding: '20px' }}>
      <View>
        {chartImageUrl && <Image src={chartImageUrl} style={{ width: '100%' }} />}
      </View>
    </Page>
  </Document>
);

// 触发导出的函数
const exportChartToPdf = () => {
  // 获取Highcharts图表的容器DOM元素
  const chartContainer = scatterChartRef.current.chart.container;

  domtoimage.toPng(chartContainer)
    .then((pngDataUrl) => {
      // 生成并下载PDF
      BlobProvider.createURL(<ChartPdfDocument chartImageUrl={pngDataUrl} />)
        .then((pdfUrl) => {
          const downloadLink = document.createElement('a');
          downloadLink.href = pdfUrl;
          downloadLink.download = 'highcharts-chart.pdf';
          downloadLink.click();
        });
    })
    .catch((err) => {
      console.error('图表转图片失败:', err);
    });
};

方案二：原生Canvas API实现（无额外依赖）

如果不想引入第三方库，可以直接用浏览器原生Canvas API完成SVG到PNG的转换。

import { Document, Page, View, Image, BlobProvider } from '@react-pdf/renderer';

const ChartPdfDocument = ({ chartImageUrl }) => (
  <Document>
    <Page size="A4" style={{ padding: '20px' }}>
      <View>
        {chartImageUrl && <Image src={chartImageUrl} style={{ width: '100%' }} />}
      </View>
    </Page>
  </Document>
);

const exportChartToPdf = () => {
  // 获取Highcharts的SVG字符串
  const svgString = scatterChartRef.current.chart.getSVG();
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  // 处理跨域资源问题（若SVG包含外部图片/字体）
  img.crossOrigin = 'anonymous';

  img.onload = () => {
    // 匹配SVG尺寸设置Canvas大小
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    
    // 提取PNG格式的base64链接
    const pngDataUrl = canvas.toDataURL('image/png');
    
    // 生成PDF并下载
    BlobProvider.createURL(<ChartPdfDocument chartImageUrl={pngDataUrl} />)
      .then((pdfUrl) => {
        const downloadLink = document.createElement('a');
        downloadLink.href = pdfUrl;
        downloadLink.download = 'highcharts-chart.pdf';
        downloadLink.click();
      });
  };

  // 将SVG字符串转为Data URL作为图片源
  img.src = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgString)))}`;
};

注意事项 #

• 若SVG中包含外部资源（如自定义字体、远程图片），需确保资源可跨域访问，或提前将资源内联到SVG中，避免转换后图片显示异常。
• 可通过调整react-pdf中Image组件的style属性，设置width/height来适配A4页面的排版需求。

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