Highcharts图表转换为React-PDF可用的图片格式

import React, { useRef, useEffect, useState } from 'react';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import { Page, View, Document, Image, StyleSheet } from '@react-pdf/renderer';
import { PDFViewer } from '@react-pdf/renderer'; // 用于在浏览器中预览

// Highcharts 配置示例
const chartOptions = {
  chart: {
    type: 'scatter',
    height: 300,
  },
  title: {
    text: '我的散点图',
  },
  series: [{
    data: [[5, 9], [7, 3], [3, 8], [9, 4], [1, 7]]
  }]
};

const styles = StyleSheet.create({
  page: {
    flexDirection: 'column',
    backgroundColor: '#E4E4E4',
    padding: 20,
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
  image: {
    width: '100%', // 确保图片宽度适应PDF页面
    height: 'auto',
  }
});

const MyPdfDocument = ({ imageDataUrl }) => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        {imageDataUrl ? (
          <Image src={imageDataUrl} style={styles.image} debug={false} />
        ) : (
          <View>
            {/* 可以放置加载指示器或占位符 */}
            <p>加载图表图片中...</p>
          </View>
        )}
      </View>
    </Page>
  </Document>
);

function ChartToPdfConverter() {
  const chartComponentRef = useRef(null);
  const [imageDataUrl, setImageDataUrl] = useState('');

  useEffect(() => {
    const convertChartToDataUrl = () => {
      if (chartComponentRef.current && chartComponentRef.current.chart) {
        const svgString = chartComponentRef.current.chart.getSVG();

        // 使用 DOMParser 将 SVG 字符串解析为 SVG DOM 元素
        const parser = new DOMParser();
        const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
        const svgElem = svgDoc.documentElement;

        // 创建一个临时的 Image 元素来辅助转换，或者直接使用 Canvas
        // 更直接的方式是利用 Blob URL 和 FileReader，但 toDataURL() 是更常见的 SVG 转换方式
        // 注意：SVGElement.toDataURL() 并不是标准API，通常需要借助 Canvas
        // 为了兼容性，我们通常将SVG绘制到Canvas，再从Canvas获取Data URL

        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // 设置 Canvas 尺寸与 SVG 保持一致
        const svgWidth = chartComponentRef.current.chart.chartWidth;
        const svgHeight = chartComponentRef.current.chart.chartHeight;
        canvas.width = svgWidth;
        canvas.height = svgHeight;

        // 创建一个 Image 对象来加载 SVG，然后绘制到 Canvas
        const img = new window.Image();
        const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
        const url = URL.createObjectURL(svgBlob);

        img.onload = () => {
          ctx.drawImage(img, 0, 0, svgWidth, svgHeight);
          URL.revokeObjectURL(url); // 释放 Blob URL
          const dataUrl = canvas.toDataURL('image/png'); // 转换为 PNG 格式
          setImageDataUrl(dataUrl);
        };
        img.onerror = (error) => {
          console.error("加载SVG到Image失败:", error);
          URL.revokeObjectURL(url);
        };
        img.src = url;

      }
    };

    // 在图表渲染完成后执行转换
    // HighchartsReact 提供了 afterChartCreate 回调，或者在 useEffect 中等待 ref 就绪
    const timeoutId = setTimeout(convertChartToDataUrl, 500); // 稍作延迟确保DOM渲染完成

    return () => clearTimeout(timeoutId);
  }, []); // 仅在组件挂载时执行一次

  return (
    <div>
      <h3>Highcharts 图表</h3>
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
        ref={chartComponentRef}
      />

      <h3>PDF 预览</h3>
      {imageDataUrl ? (
        <PDFViewer width="100%" height="600px">
          <MyPdfDocument imageDataUrl={imageDataUrl} />
        </PDFViewer>
      ) : (
        <p>正在生成PDF...</p>
      )}
    </div>
  );
}

export default ChartToPdfConverter;