React Native：如何自动保存WebView加载的当前网页为本地文件

你需要用到两个核心依赖：react-native-webview（你当前已在使用）、react-native-fs（用于本地文件写入，安卓端适配完善）

步骤1：安装必要依赖 #

如果还未安装react-native-fs，执行以下命令：

npm install react-native-fs
# 安卓端需要同步Gradle，执行
cd android && ./gradlew clean && cd ..

步骤2：配置安卓权限 #

在android/app/src/main/AndroidManifest.xml中按需添加存储权限（如果仅保存到应用私有目录，不需要额外申请权限；如果要保存到公共下载目录，添加以下权限即可，安卓10及以上自动适配分区存储）：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="29" />

步骤3：WebView逻辑实现 #

核心逻辑为：监听WebView的onLoadEnd加载完成事件，触发后注入JS获取当前页面完整HTML内容，拿到内容后调用react-native-fs写入本地文件。
示例代码如下：

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

const AppWebView = () => {
  const webViewRef = useRef(null);

  // 页面加载完成后的回调
  const handleLoadEnd = async () => {
    // 注入JS获取页面完整HTML
    const htmlResult = await webViewRef.current.injectJavaScript(`
      (function() {
        return document.documentElement.outerHTML;
      })();
      true; // 必须添加该行，否则injectJavaScript不会返回执行结果
    `);

    if (htmlResult) {
      // 定义保存路径，这里用应用私有缓存目录，不需要权限
      const savePath = `${RNFS.CachesDirectoryPath}/saved_page_${Date.now()}.html`;
      try {
        // 写入文件
        await RNFS.writeFile(savePath, htmlResult, 'utf8');
        console.log('页面保存成功，路径：', savePath);
        // 如果需要保存到公共下载目录，把路径替换为 RNFS.DownloadDirectoryPath 即可
      } catch (err) {
        console.error('保存失败：', err.message);
      }
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: '你要加载的网页地址' }}
      onLoadEnd={handleLoadEnd}
      javaScriptEnabled={true} // 必须开启JS才能执行注入代码
      domStorageEnabled={true}
    />
  );
};

export default AppWebView;

注意事项 #

• 如果你用的react-native-webview版本低于11.0.0，injectJavaScript不支持直接返回执行结果，可以改用postMessage传递HTML内容：注入JS时执行window.ReactNativeWebView.postMessage(document.documentElement.outerHTML)，同时给WebView绑定onMessage属性，在回调的event.nativeEvent.data中拿到HTML内容
• 如果你需要保存网页的静态资源（图片、样式、脚本等）而非仅HTML源码，需要额外对获取到的HTML内容进行资源解析，把远程资源路径替换为本地下载后的路径，同时批量下载所有关联资源到本地目录
• 部分网页有反爬策略，可能会限制JS注入获取DOM内容，这种情况可以尝试在WebView配置中添加userAgent参数模拟普通浏览器请求
• 写入大体积页面时建议放到异步任务执行，避免阻塞UI线程

内容的提问来源于stack exchange，提问作者mohammad bagher Malekhosseini