React项目中如何通过React-pdf导出Highcharts的SVG至PDF？

React-pdf的<Svg>组件无法直接解析Highcharts生成的SVG字符串，核心原因是两者对SVG的处理逻辑不兼容——React-pdf要求使用其内置的SVG子组件（如<Path>、<Rect>），而非原始的SVG标签。以下是可行的解决方案：

核心思路 #

1. 解析Highcharts生成的SVG字符串，提取根节点属性（width、height、viewBox等）
2. 将SVG中的子元素（路径、矩形等）转换为React-pdf支持的对应组件

具体实现步骤 #

1. 解析SVG字符串 #

使用DOMParser将chart.getSVG()返回的字符串解析为DOM元素，提取关键属性：

const svgStr = chart.getSVG();
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgStr, 'image/svg+xml');
const svgElement = svgDoc.querySelector('svg');

const svgProps = {
  width: svgElement.getAttribute('width'),
  height: svgElement.getAttribute('height'),
  viewBox: svgElement.getAttribute('viewBox') || `0 0 ${svgElement.getAttribute('width')} ${svgElement.getAttribute('height')}`
};

2. 转换SVG子元素 #

遍历SVG子元素，将其映射为React-pdf的内置组件。示例处理常见的路径、矩形和文本元素：

const convertSvgChildren = (svgChildren) => {
  return Array.from(svgChildren).map((el, idx) => {
    switch(el.tagName.toLowerCase()) {
      case 'path':
        return (
          <Path
            key={idx}
            d={el.getAttribute('d')}
            fill={el.getAttribute('fill')}
            stroke={el.getAttribute('stroke')}
            strokeWidth={el.getAttribute('stroke-width')}
          />
        );
      case 'rect':
        return (
          <Rect
            key={idx}
            x={el.getAttribute('x')}
            y={el.getAttribute('y')}
            width={el.getAttribute('width')}
            height={el.getAttribute('height')}
            fill={el.getAttribute('fill')}
          />
        );
      case 'text':
        return (
          <Text
            key={idx}
            x={el.getAttribute('x')}
            y={el.getAttribute('y')}
            fontSize={el.getAttribute('font-size')}
            fill={el.getAttribute('fill')}
          >
            {el.textContent}
          </Text>
        );
      // 可根据图表需求扩展更多元素类型（如circle、line等）
      default:
        return null;
    }
  });
};

const svgChildren = convertSvgChildren(svgElement.children);

3. 在React-pdf中渲染 #

将提取的属性和转换后的子元素传入React-pdf的<Svg>组件：

import { Document, Page, Svg, Path, Rect, Text } from '@react-pdf/renderer';

// 在组件中使用
<Document>
  <Page size="A4">
    <Svg {...svgProps}>
      {svgChildren}
    </Svg>
  </Page>
</Document>

简化方案：使用第三方库 #

如果手动转换过于繁琐，可使用svg-to-react-pdf库自动完成转换：

npm install svg-to-react-pdf

import { convert } from 'svg-to-react-pdf';

// 直接转换SVG字符串
const reactPdfSvg = convert(svgStr);

// 在React-pdf中渲染
<Document>
  <Page>
    {reactPdfSvg}
  </Page>
</Document>

注意事项 #

• 复杂图表可能包含特殊SVG元素或属性，需针对性扩展转换逻辑
• 确保Highcharts生成的SVG不包含React-pdf不支持的命名空间或高级特性
• 测试时可先简化图表，验证基础转换逻辑后再逐步添加复杂内容

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