如何在动态HTML中展示React Native Victory图表并导出为PDF？

问题背景 #

需要在动态生成的HTML中展示VictoryChart组件并转为PDF导出，直接在HTML中写入<VictoryChart />无法生效；官方提供的截图方案需要预先挂载所有视图（日/周等）的图表，操作繁琐，寻求更优实现方式。

原代码示例：

const handleExportPDF = ()=>{
const htmlFile = `
<html>
<body>
<section>
<VictoryChart /> //for example show that chart here with extra detail
</section> 
</body>
</html>
`
sharePDF('htmlfile','export file name') //this libray convert html to pdf then share that with base64
}
<View>
<VictoryChart />
<Button title="export as pdf" onPress={handleExportPDF}/>
</View>

可行解决方案 #

1. 将VictoryChart转为SVG字符串嵌入HTML #

利用Victory依赖的react-native-svg，将图表转为SVG字符串，直接插入动态HTML中，PDF转换工具可直接渲染SVG内容。

代码示例：

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import { VictoryChart, VictoryLine } from 'victory-native';
import Svg from 'react-native-svg';

const ChartScreen = () => {
  const svgRef = useRef(null);

  const handleExportPDF = async () => {
    // 获取当前图表的SVG字符串
    const svgString = svgRef.current?.toString();
    
    // 构建包含SVG和详情的HTML
    const htmlFile = `
      <html>
        <body>
          <section>
            <h3>图表详情</h3>
            ${svgString}
            <p>这里可以添加任意额外说明文本</p>
          </section>
        </body>
      </html>
    `;

    await sharePDF(htmlFile, '导出图表.pdf');
  };

  return (
    <View>
      {/* 用Svg组件包裹VictoryChart，用于获取SVG字符串 */}
      <Svg ref={svgRef} style={{ width: '100%', height: 300 }}>
        <VictoryChart>
          <VictoryLine data={[{x: 1, y: 2}, {x: 2, y: 3}, {x: 3, y: 5}]} />
        </VictoryChart>
      </Svg>
      <Button title="导出为PDF" onPress={handleExportPDF} />
    </View>
  );
};

export default ChartScreen;

2. 在动态HTML中使用Web版Victory渲染 #

React Native版Victory无法在HTML中运行，但Web版victory库可以通过CDN引入，在HTML中用原生JS渲染图表，需确保PDF转换工具支持执行JavaScript。

代码示例：

const handleExportPDF = () => {
  const htmlFile = `
    <html>
      <head>
        <!-- 引入React和Web版Victory的CDN资源 -->
        <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/victory@36/dist/victory.min.js"></script>
      </head>
      <body>
        <section>
          <h3>图表详情</h3>
          <div id="chart-container"></div>
          <p>自定义的额外详情内容</p>
        </section>
        <script>
          // 用Web版Victory渲染图表
          const { VictoryChart, VictoryLine } = Victory;
          ReactDOM.render(
            React.createElement(VictoryChart, {},
              React.createElement(VictoryLine, { data: [{x:1,y:2}, {x:2,y:3}, {x:3,y:5}] })
            ),
            document.getElementById('chart-container')
          );
        </script>
      </body>
    </html>
  `;

  sharePDF(htmlFile, '导出图表.pdf');
};

3. 优化官方截图方案：动态渲染目标视图 #

无需预先挂载所有视图，根据当前需要导出的视图（日/周等）动态渲染对应图表，再截图插入HTML。

代码示例：

import React, { useState, useRef } from 'react';
import { View, Button } from 'react-native';
import { VictoryChart, VictoryLine } from 'victory-native';
import ViewShot from 'react-native-view-shot';

const ChartScreen = () => {
  const [currentView, setCurrentView] = useState('day');
  const viewShotRef = useRef(null);

  // 根据视图类型返回对应图表数据
  const getChartData = () => {
    switch(currentView) {
      case 'day':
        return [{x: 1, y: 2}, {x: 2, y: 3}, {x: 3, y: 5}];
      case 'week':
        return [{x: 1, y: 4}, {x: 2, y: 2}, {x: 3, y: 6}, {x: 4, y: 3}];
      default:
        return [];
    }
  };

  const handleExportPDF = async () => {
    // 对当前渲染的图表进行截图
    const imageUri = await viewShotRef.current.capture();
    
    // 构建包含截图和详情的HTML
    const htmlFile = `
      <html>
        <body>
          <section>
            <h3>${currentView === 'day' ? '日视图图表' : '周视图图表'}</h3>
            <img src="${imageUri}" style="width: 100%;" />
            <p>${currentView}视图的详细说明内容</p>
          </section>
        </body>
      </html>
    `;

    await sharePDF(htmlFile, `${currentView}_chart.pdf`);
  };

  return (
    <View>
      <ViewShot ref={viewShotRef} options={{ format: 'png', quality: 0.9 }}>
        <VictoryChart>
          <VictoryLine data={getChartData()} />
        </VictoryChart>
      </ViewShot>
      <Button title="切换周视图" onPress={() => setCurrentView('week')} />
      <Button title="导出为PDF" onPress={handleExportPDF} />
    </View>
  );
};

export default ChartScreen;

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