React Native应用使用react-native-webview预览PDF时自动下载问题求助

你的问题核心是服务器返回的PDF链接在移动端会触发下载而非预览，主要原因有两个：一是服务器响应头中Content-Disposition被设置为attachment（强制下载），二是移动端WebView默认缺少内置PDF预览支持。以下是两种可行的解决方法：

方法1：调整WebView配置模拟桌面浏览器 #

通过修改WebView的User Agent，让服务器识别请求来自桌面浏览器，从而返回允许预览的响应（如果服务器会根据UA调整响应头的话），同时配置WebView的相关属性开启预览支持：

import WebView from 'react-native-webview';
import { useState, View, TouchableOpacity, StyleSheet, Text } from 'react-native';

const PreviewPdf = () => {
  const [showPdf, setShowPdf] = useState(false);
  const [pdfPath, setPdfPath] = useState('');

  const openLink = (cn) => {
    const baseURL = 'http://192.168.2.81:7060/getCNToPreview';
    const url = `${baseURL}/${cn?.fileName}`;
    setPdfPath(url);
    setShowPdf(true);
  };

  // 模拟桌面Chrome浏览器的User Agent
  const desktopUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36';

  return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity onPress={() => openLink(cn)} style={styles.viewButton}>
        <Text>View</Text>
      </TouchableOpacity>
           
      {showPdf && pdfPath !== '' && (
        <WebView
          source={{ uri: pdfPath }}
          style={styles.webView}
          userAgent={desktopUserAgent}
          // Android 允许访问文件和内容
          androidAllowFileAccess={true}
          androidAllowContentAccess={true}
          // iOS 允许内嵌媒体播放（PDF预览依赖此）
          allowsInlineMediaPlayback={true}
          // 启用DOM存储，提升兼容性
          domStorageEnabled={true}
        />
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  viewButton: {
    padding: 12,
    backgroundColor: '#e0e0e0',
    alignItems: 'center',
    margin: 10,
    borderRadius: 4,
  },
  webView: {
    flex: 1,
    margin: 10,
  },
});

export default PreviewPdf;

方法2：使用专业PDF预览库（推荐） #

如果服务器强制返回下载响应（Content-Disposition: attachment），WebView的方式无法解决，此时推荐使用专门的PDF渲染库react-native-pdf，先将PDF下载到本地再渲染，兼容性更稳定：

步骤1：安装依赖 #

npm install react-native-pdf react-native-fs --save
# iOS 需执行pod安装
cd ios && pod install && cd ..

步骤2：实现代码 #

import Pdf from 'react-native-pdf';
import RNFS from 'react-native-fs';
import { useState, View, TouchableOpacity, ActivityIndicator, StyleSheet, Text } from 'react-native';

const PreviewPdf = () => {
  const [localPdfPath, setLocalPdfPath] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const openLink = async (cn) => {
    if (!cn?.fileName) return;
    setIsLoading(true);
    const baseURL = 'http://192.168.2.81:7060/getCNToPreview';
    const url = `${baseURL}/${cn.fileName}`;
    const localFilePath = `${RNFS.DocumentDirectoryPath}/${cn.fileName}`;

    try {
      // 下载PDF到本地文档目录
      const downloadResult = await RNFS.downloadFile({
        fromUrl: url,
        toFile: localFilePath,
      }).promise;

      if (downloadResult.statusCode === 200) {
        setLocalPdfPath(localFilePath);
      }
    } catch (error) {
      console.error('PDF下载失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <TouchableOpacity onPress={() => openLink(cn)} style={styles.viewButton}>
        <Text>View</Text>
      </TouchableOpacity>
           
      {isLoading && (
        <ActivityIndicator style={styles.loader} size="large" color="#0000ff" />
      )}
      
      {localPdfPath !== '' && (
        <Pdf
          source={{ uri: localPdfPath }}
          style={styles.pdfView}
          onLoadComplete={(numberOfPages) => {
            console.log(`PDF加载完成，共${numberOfPages}页`);
          }}
          onPageChanged={(currentPage, totalPages) => {
            console.log(`当前第${currentPage}页`);
          }}
        />
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  viewButton: {
    padding: 12,
    backgroundColor: '#e0e0e0',
    alignItems: 'center',
    margin: 10,
    borderRadius: 4,
  },
  loader: {
    flex: 1,
    justifyContent: 'center',
  },
  pdfView: {
    flex: 1,
    margin: 10,
  },
});

export default PreviewPdf;

额外建议 #

如果有权限修改后端服务，可以直接调整API的响应头：

• 将Content-Disposition设置为inline（而非attachment）
• 确保Content-Type设置为application/pdf

这样无论桌面还是移动端，都能直接触发预览行为。

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