React Native WebView无法自动下载文件，iOS/Android端问题解决求助

针对你遇到的iOS仅预览文件、Android无反应且页面重载的问题，不能只靠网页脚本或单一配置解决，需要结合WebView原生回调+少量脚本调整，以下是分平台的具体处理方式：

一、iOS 端：拦截预览行为，改用原生下载 #

iOS底层的WKWebView默认会直接预览PDF、图片等可识别文件，不会触发download属性的下载行为。需要通过WebView的回调拦截下载请求，转由原生能力处理：

1. 调整WebView配置 #

添加请求拦截和消息监听，接收网页端的下载指令：

import { Platform } from 'react-native';
import WebView from 'react-native-webview';

<WebView
  // 保留你原有的配置项
  javaScriptEnabled={true}
  domStorageEnabled={true}
  allowFileAccessFromFileURLs={true}
  allowUniversalAccessFromFileURLs={true}
  allowFileAccess={true}
  originWhitelist={['*']}
  mixedContentMode={'always'}
  // 添加请求拦截回调
  onShouldStartLoadWithRequest={(request) => {
    if (Platform.OS === 'ios' && request.url.startsWith('blob:')) {
      // 调用原生下载逻辑，阻止WebView加载预览
      downloadFileNative(request.url, '默认文件名');
      return false;
    }
    return true;
  }}
  // 注入脚本重写网页下载逻辑，把下载信息传给RN端
  injectedJavaScript={`
    window.downloadFileFromObjectUrl = (source, filename) => {
      const downloadUrl = window.URL.createObjectURL(source);
      window.ReactNativeWebView.postMessage(JSON.stringify({
        type: 'download',
        url: downloadUrl,
        filename: filename
      }));
    };
  `}
  // 接收网页发送的下载消息
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.type === 'download') {
      downloadFileNative(data.url, data.filename);
    }
  }}
/>

2. 原生下载实现示例（基于react-native-fs） #

import RNFS from 'react-native-fs';

const downloadFileNative = async (url, filename) => {
  const savePath = `${RNFS.DocumentDirectoryPath}/${filename}`;
  const task = RNFS.downloadFile({
    fromUrl: url,
    toFile: savePath,
  });
  
  try {
    await task.promise;
    console.log('文件下载完成');
    // 可添加通知用户的逻辑
  } catch (err) {
    console.error('下载失败:', err);
  }
};

二、Android 端：配置权限与下载监听 #

Android端无反应且重载，多是因为WebView未配置下载监听器，或ObjectURL的权限/兼容性问题：

1. 修改AndroidManifest.xml配置 #

添加必要权限与明文流量许可（若下载链接为HTTP）：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<application
  ...
  android:usesCleartextTraffic="true"> <!-- HTTP链接需要添加 -->
  ...
</application>

2. WebView添加下载回调 #

直接通过onDownloadStart处理下载请求：

<WebView
  // 保留原有配置项
  ...
  onDownloadStart={(url, filename) => {
    // 调用Android原生下载管理器
    const downloadManager = require('react-native').NativeModules.DownloadManager;
    downloadManager.download(url, filename);
  }}
/>

3. 网页脚本兼容调整（可选） #

Android WebView对Blob ObjectURL支持有限，可转成base64传给RN端处理：

// 网页端重写下载函数
const downloadFileFromObjectUrl = (source, filename) => {
  const reader = new FileReader();
  reader.onload = () => {
    window.ReactNativeWebView.postMessage(JSON.stringify({
      type: 'download-base64',
      base64: reader.result.split(',')[1],
      filename: filename
    }));
  };
  reader.readAsDataURL(source);
};

RN端接收base64并写入文件：

const handleBase64Download = async (base64, filename) => {
  const savePath = `${RNFS.DocumentDirectoryPath}/${filename}`;
  await RNFS.writeFile(savePath, base64, 'base64');
  console.log('文件保存完成');
};

三、总结 #

• iOS：必须通过WebView回调拦截下载请求，改用原生下载，无法仅靠网页脚本解决。
• Android：需要配置权限和下载监听器，同时可调整网页脚本规避ObjectURL兼容性问题。
• 优先采用postMessage让RN原生处理下载，比WebView内部的download属性跨平台稳定性更高。

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