Expo应用中如何显示Base64格式PDF？附请求代码

首先修正你的请求逻辑——axios默认会将响应解析为JSON，这会破坏二进制PDF数据，必须添加responseType: 'blob'参数确保正确获取文件内容：

const displayPdfFile = async(contract)=>{
  try {
    const token = await AsyncStorage.getItem('token');
    const res = await axios.get(`${url}/files/${contract.id}`, {
      headers: { Authorization: token },
      responseType: 'blob' // 关键配置：保留二进制原始数据
    });
    const fileReader = new FileReader();
    fileReader.readAsDataURL(res.data);
    fileReader.onload = ()=>{
      // 将Base64格式的PDF数据存入组件状态，供渲染使用
      setPdfSource(fileReader.result);
    };
  } catch(e) {
    alert(e);
    console.log(e);
  }
}

接下来提供两种Expo环境下的可行显示方案：

方案1：使用expo-webview直接加载（最简实现） #

安装依赖：

npx expo install expo-webview

组件渲染代码：

import { WebView } from 'expo-webview';
import { useState } from 'react';
import { Text } from 'react-native';

export default function PdfViewer() {
  const [pdfSource, setPdfSource] = useState(null);

  // 这里调用displayPdfFile获取PDF数据...

  return (
    <WebView
      source={{ uri: pdfSource }}
      style={{ flex: 1 }}
      startInLoadingState={true}
      renderLoading={() => <Text>加载PDF中...</Text>}
    />
  );
}

方案2：使用专业PDF组件（兼容性更强） #

使用@react-native-pdf/pdf组件，对复杂排版、多页PDF的支持更完善：
安装依赖：

npx expo install @react-native-pdf/pdf

组件渲染代码：

import Pdf from '@react-native-pdf/pdf';
import { useState } from 'react';
import { View, Text } from 'react-native';

export default function PdfViewer() {
  const [pdfSource, setPdfSource] = useState(null);

  // 这里调用displayPdfFile获取PDF数据...

  return (
    <View style={{ flex: 1 }}>
      {pdfSource ? (
        <Pdf
          source={{ uri: pdfSource }}
          style={{ flex: 1 }}
          onLoadComplete={(numPages) => console.log(`PDF加载完成，共${numPages}页`)}
          onError={(err) => console.error('PDF加载失败:', err)}
        />
      ) : (
        <Text>加载中...</Text>
      )}
    </View>
  );
}

可选优化：转存本地文件后加载 #

如果遇到DataURL加载不稳定的情况，可借助expo-file-system将Base64数据转成本地文件再加载：

import * as FileSystem from 'expo-file-system';

// 处理Base64数据转本地文件
const savePdfToLocal = async (pdfSource, contractId) => {
  // 剔除DataURL前缀，保留纯Base64内容
  const base64Content = pdfSource.replace('data:application/pdf;base64,', '');
  const localUri = `${FileSystem.documentDirectory}contract-${contractId}.pdf`;
  await FileSystem.writeAsStringAsync(localUri, base64Content, {
    encoding: FileSystem.EncodingType.Base64
  });
  return localUri;
};

// 使用本地URI加载PDF
const localPdfUri = await savePdfToLocal(pdfSource, contract.id);
setPdfSource(localPdfUri);

内容的提问来源于stack exchange，提问作者Fran Fí de Nena