react-native-pdf加载HTTP链接PDF报错：文件格式错误或损坏

我能正常打开HTTPS协议的PDF链接，但打开指定的HTTP协议PDF链接时失败，报错信息如下：

Error: cannot create a document: File not in PDF format or corrupted.

我怀疑是HTTP协议的问题，但这个PDF链接是服务器返回的，没办法改成HTTPS。相关代码如下：

import Pdf from 'react-native-pdf';
import {
  View,
} from 'react-native';

const PDFExample = ({route}) => {
  const source = {
    uri: 'http://94.23.154.57:8081/digital-cert/download-file?id=33FB3234-23EC-472B-AB6F-76436DDCFA45&view=1',
    cache: true,
  };
  return (
      <View style={styles.container}>
        <Pdf
          trustAllCerts={false}
          source={source}
          onLoadComplete={(numberOfPages, filePath) => {
            console.log(`Number of pages: ${numberOfPages}`);
          }}
          onPageChanged={(page, numberOfPages) => {
            console.log(`Current page: ${page}`);
          }}
          onError={error => {
            console.log(error);
          }}
          onPressLink={uri => {
            console.log(`Link pressed: ${uri}`);
          }}
          style={styles.pdf}
        />
      </View>
)
}

1. 开启证书信任 #

把代码里Pdf组件的trustAllCerts参数改成true，很多HTTP链接的证书验证问题会导致加载失败：

<Pdf
  trustAllCerts={true} // 修改此处
  source={source}
  // 其他属性保留
/>

2. 先下载到本地再加载 #

如果直接加载HTTP链接不行，手动把PDF下载到本地缓存，再加载本地路径。这里用rn-fetch-blob举例：

先安装依赖：

npm install rn-fetch-blob --save

修改后的代码：

import Pdf from 'react-native-pdf';
import { View, Text } from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';
import { useState, useEffect } from 'react';

const PDFExample = ({route}) => {
  const [localPdfPath, setLocalPdfPath] = useState(null);
  const pdfUrl = 'http://94.23.154.57:8081/digital-cert/download-file?id=33FB3234-23EC-472B-AB6F-76436DDCFA45&view=1';

  useEffect(() => {
    const downloadPdf = async () => {
      try {
        const res = await RNFetchBlob.config({ fileCache: true }).fetch('GET', pdfUrl);
        setLocalPdfPath(res.path());
      } catch (err) {
        console.error('下载失败:', err);
      }
    };
    downloadPdf();
  }, []);

  if (!localPdfPath) {
    return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>加载中...</Text></View>;
  }

  return (
    <View style={styles.container}>
      <Pdf
        source={{ uri: localPdfPath }}
        onLoadComplete={(numberOfPages) => console.log(`页数: ${numberOfPages}`)}
        onError={err => console.log(err)}
        style={styles.pdf}
      />
    </View>
  );
}

3. 配置Android网络安全策略 #

Android默认会拦截明文HTTP请求，需要添加配置允许目标域名的HTTP流量：

1. 在android/app/src/main/res/xml下创建network_security_config.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">94.23.154.57</domain>
    </domain-config>
</network-security-config>

2. 在AndroidManifest.xml的application标签里引用这个配置：

<application
  ...
  android:networkSecurityConfig="@xml/network_security_config">
  ...
</application>

4. 确认返回内容是有效PDF #

有时候服务器返回的不是真实PDF（比如错误页面），可以用命令行测试：

curl http://94.23.154.57:8081/digital-cert/download-file?id=33FB3234-23EC-472B-AB6F-76436DDCFA45&view=1 --output test.pdf

打开test.pdf看是否正常，或者用文本编辑器查看开头是否有%PDF-标识（PDF文件的标准开头）。

内容的提问来源于stack exchange，提问作者19020051 Phạm Trung Nghĩa