React Native Windows中如何将WebView内Plotly图表保存至本地硬盘？

核心逻辑是：让Plotly生成图片的Base64编码，通过WebView与RN的通信机制传递数据，再用react-native-fs将Base64解码写入本地文件。

步骤1：在WebView的HTML中生成并传递Base64图片 #

在加载Plotly的HTML页面里，调用Plotly的toImage方法生成图片，然后通过postMessage把Base64数据传给RN端：

<!-- WebView内的HTML代码 -->
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>
  <div id="plot"></div>
  <script>
    // 初始化Plotly图表
    const data = [{ x: [1, 2, 3], y: [4, 1, 2], type: 'bar' }];
    const layout = { title: '测试图表' };
    Plotly.newPlot('plot', data, layout);

    // 生成图片并发送给RN
    function sendPlotImageToRN() {
      Plotly.toImage('plot', { format: 'png', width: 800, height: 600 })
        .then(imgData => {
          // 去掉Base64前缀 "data:image/png;base64,"
          const base64Str = imgData.split(',')[1];
          // 发送给RN端
          window.ReactNativeWebView.postMessage(base64Str);
        })
        .catch(err => console.error('生成图片失败:', err));
    }

    // 可绑定按钮触发，或自动执行
    sendPlotImageToRN();
  </script>
</body>
</html>

步骤2：RN端接收Base64并写入本地 #

在RN的WebView组件中监听onMessage事件，拿到Base64数据后，用react-native-fs写入Windows本地路径：

先安装依赖：

npm install react-native-fs --save
# RN版本低于0.60时，需额外执行链接操作
npx react-native link react-native-fs

编写RN组件代码：

import React from 'react';
import { WebView } from 'react-native-webview';
import RNFS from 'react-native-fs';

const PlotlyWebView = () => {
  const handleMessage = async (event) => {
    const base64Data = event.nativeEvent.data;
    if (!base64Data) return;

    // Windows本地存储路径示例：应用私有文档目录下的plotly-chart.png
    const filePath = `${RNFS.DocumentDirectoryPath}/plotly-chart.png`;

    try {
      // 将Base64写入文件
      await RNFS.writeFile(filePath, base64Data, 'base64');
      console.log('图片已保存至:', filePath);
    } catch (err) {
      console.error('保存图片失败:', err);
    }
  };

  // 加载本地HTML内容，也可替换为远程URL
  const htmlContent = `
    <!-- 粘贴上述HTML代码内容 -->
  `;

  return (
    <WebView
      source={{ html: htmlContent }}
      onMessage={handleMessage}
      javaScriptEnabled={true}
    />
  );
};

export default PlotlyWebView;

注意事项 #

• 权限配置：在Windows应用的Package.appxmanifest中添加文件访问权限（如Documents Library Access），确保应用能写入目标目录。
• 路径选择：优先使用RNFS.DocumentDirectoryPath（应用私有目录，无需额外权限），若需写入公共目录，需配置对应权限并使用RNFS.ExternalDirectoryPath等路径。
• 格式调整：Plotly的toImage支持png、jpeg等格式，可按需修改format参数。

内容的提问来源于stack exchange，提问作者R. Anderson