React Native中使用RNFetchBlob下载PDF格式无效问题求助

下载的PDF无法打开，核心原因是实际下载的内容并非有效PDF文件，结合你提到的URL受保护的情况，问题大概率出在请求认证缺失或文件保存逻辑错误上，以下是具体修复步骤：

1. 给请求添加认证头部 #

受保护的URL必须携带对应认证信息（比如JWT Token、Session Cookie等），否则服务器会返回登录页面、错误页这类HTML内容，而非PDF二进制数据。在fetch方法的第三个参数中补充认证头部：

RNFetchBlob.config(configOptions)
  .fetch('GET', url, {
    // 替换为你的实际认证信息，示例：
    'Authorization': 'Bearer ' + yourAuthToken,
    'Cookie': yourSessionCookie
  })

2. 修正iOS端的文件保存逻辑 #

原代码中iOS端手动调用writeFile写入res.data属于冗余操作——RNFetchBlob已经自动将文件保存到指定路径，重复写入会直接损坏文件。删除这部分错误逻辑：

// 移除以下两行代码
// RNFetchBlob.fs.writeFile(configfb.path, res.data, 'base64');
// 直接使用res.path()获取正确的文件路径
RNFetchBlob.ios.previewDocument(res.path());

3. 验证下载内容的有效性 #

可以在回调中添加代码，检查文件开头是否符合PDF格式特征（PDF文件开头的二进制转base64后为JVBERi0xLj），确认是否真的下载到了PDF数据：

.then((res) => {
  // 读取文件前10个字节验证
  RNFetchBlob.fs.readFile(res.path(), 'base64', 0, 10).then(head => {
    console.log('File header:', head);
  });
  // ...其他逻辑
})

修正后的完整代码 #

const downloadFile = async (url, title) => {
  const grantedstorage = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
  );
  if (grantedstorage === PermissionsAndroid.RESULTS.GRANTED) {
    const { dirs } = RNFetchBlob.fs;
    const dirToSave = Platform.OS === 'ios' ? dirs.DocumentDir : dirs.DownloadDir;
    const fileName = `${title}.pdf`;
    const savePath = `${dirToSave}/${fileName}`;

    const configfb = {
      fileCache: true,
      addAndroidDownloads: {
        useDownloadManager: true,
        notification: true,
        mediaScannable: true,
        title: fileName,
        path: savePath,
        mime: 'application/pdf',
      },
    };

    const configOptions = Platform.select({
      ios: {
        fileCache: configfb.fileCache,
        path: savePath,
        notification: configfb.notification,
      },
      android: configfb,
    });

    RNFetchBlob.config(configOptions)
      .fetch('GET', url, {
        // 这里补充你的认证头部信息
        'Authorization': 'Bearer ' + yourAuthToken,
        // 若需要Cookie认证，取消注释并补充内容
        // 'Cookie': 'sessionId=xxx'
      })
      .then((res) => {
        if (Platform.OS === 'ios') {
          RNFetchBlob.ios.previewDocument(res.path());
        } else {
          alert('File downloaded');
        }
        console.log('The file saved to ', res.path());
      })
      .catch((e) => {
        console.log('Catch ERROR', e.message);
      });
  } else if (grantedstorage === PermissionsAndroid.RESULTS.DENIED) {
    alert("Please allow permission to storage if you want to download file.");
  } else {
    alert("Please go to app setting and allow permission to storage.");
  }
};

额外排查点 #

• 确认服务器返回的Content-Type是application/pdf，如果是text/html，说明请求未通过认证，返回了非PDF内容。
• Android端开启useDownloadManager后，系统下载管理器会单独处理请求，若认证信息无法通过headers传递，可能需要将认证参数拼接到URL中，或改用自定义下载逻辑。

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