React Native WebView安卓端下载谷歌Drive链接存为HTML文件的解决方法

问题原因 #

你使用的是谷歌Drive的预览链接（带/view?usp=share_link后缀），点击下载时实际触发的是下载预览页面的HTML，而非原始PDF文件。谷歌Drive的预览页面会拦截直接下载请求，返回页面源码而非文件内容。

解决方案 #

1. 替换为谷歌Drive直接下载链接 #

把原链接的预览路径替换成直接导出下载的路径：

• 提取原链接中的文件ID：1_jGyMjDXhyLixkES87bhluEOnI0ZNAp7（即file/和/view之间的部分）
• 构造新的下载链接：https://drive.google.com/uc?export=download&id=1_jGyMjDXhyLixkES87bhluEOnI0ZNAp7

2. 优化WebView配置 #

去掉无效的请求头（谷歌Drive不会因为这些头返回PDF，反而可能干扰），并添加下载事件监听确保正确处理：

修改后的代码示例：

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

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

  const handleDownloadStart = (downloadEvent) => {
    // 可使用react-native-fs等库手动处理下载，确保文件格式正确
    // 示例代码（需先安装react-native-fs）：
    // import RNFS from 'react-native-fs';
    // const downloadPath = `${RNFS.ExternalDirectoryPath}/downloaded.pdf`;
    // RNFS.downloadFile({
    //   fromUrl: downloadEvent.url,
    //   toFile: downloadPath,
    // }).promise.then(() => {
    //   console.log('PDF下载完成');
    // }).catch(err => {
    //   console.error('下载失败:', err);
    // });
    console.log('开始下载PDF:', downloadEvent.url);
  };

  return (
    <WebView
      style={{ flex: 1 }}
      ref={webViewRef}
      source={{
        uri: 'https://drive.google.com/uc?export=download&id=1_jGyMjDXhyLixkES87bhluEOnI0ZNAp7',
      }}
      originWhitelist={['*']}
      allowFileAccess
      allowFileAccessFromFileURLs
      allowUniversalAccessFromFileURLs
      mixedContentMode="always"
      domStorageEnabled
      onDownloadStart={handleDownloadStart} // 监听下载事件
    />
  );
};

export default DrivePDFViewer;

3. 可选：处理谷歌Drive的下载验证 #

如果文件较大，谷歌Drive可能会弹出验证页面（需点击"下载"按钮确认），这时候可以在onMessage回调中处理，或者直接使用第三方库（如react-native-drive-downloader）绕过验证，确保直接下载文件。

额外说明 #

• 无需在请求头中设置Accept、Content-Type等字段，直接下载链接会自动返回正确的PDF内容类型。
• 安卓10及以上版本，可按需添加MANAGE_EXTERNAL_STORAGE权限，配合已添加的WRITE_EXTERNAL_STORAGE使用。

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