React Native 中批量下载 PDF 文件的最佳实践-js教程-PHP中文网

React Native 中批量下载 PDF 文件的最佳实践

碧海醫心

发布： 2025-10-30 18:05:01

原创

387人浏览过

react native 中批量下载 pdf 文件的最佳实践

本文介绍了在 React Native 应用中实现批量 PDF 文件下载的最佳方法，特别针对离线模式应用场景。我们将探讨如何利用 react-native-blob-util 或 rn-fetch-blob 等库高效地下载大量 PDF 文件到移动设备本地存储，以便用户在没有网络连接的情况下也能预览这些文件。同时，简要提及使用 react-native-fs 进行文件上传的方法。

在 React Native 应用中，尤其是需要支持离线模式的应用，下载并存储 PDF 文件是一项常见的需求。例如，应用可能需要定期从服务器获取更新的 PDF 文档，并将其存储在本地，以便用户在没有网络连接时也能访问。当需要下载大量 PDF 文件时（比如每月更新 100+ 个文件），选择合适的库和实现方法至关重要，以确保下载过程的高效性和可靠性。

使用 react-native-blob-util 下载 PDF 文件

react-native-blob-util 是一个强大的 React Native 库，专门用于处理文件相关的操作，包括下载、上传和文件系统访问。它提供了跨平台的 API，可以在 iOS 和 Android 上运行。

安装：

npm install react-native-blob-util
# 或者
yarn add react-native-blob-util

登录后复制

基本用法示例：

import RNFetchBlob from 'react-native-blob-util';

const downloadPDF = async (pdfUrl, fileName) => {
  const { config, fs } = RNFetchBlob;
  const downloads = fs.dirs.DownloadDir; // 或者使用其他目录，如 DocumentDir

  try {
    const res = await config({
      fileCache: true,
      addAndroidDownloads: {
        useDownloadManager: true,
        notification: true,
        path:  downloads + "/" + fileName + ".pdf",
        description: 'Downloading PDF...'
      },
    })
    .fetch('GET', pdfUrl);

    console.log('The file saved to ', res.path());
    alert('PDF Downloaded Successfully.');

  } catch (error) {
    console.error('Download error:', error);
    alert('Failed to download PDF.');
  }
};

// 使用示例
const pdfURL = 'YOUR_PDF_URL'; // 替换为实际的 PDF 文件 URL
const pdfName = 'document'; // 替换为实际的文件名
downloadPDF(pdfURL, pdfName);

登录后复制

代码解释：

首先，从 react-native-blob-util 导入 RNFetchBlob。
RNFetchBlob.config 用于配置下载行为，包括是否缓存文件、是否使用 Android 下载管理器等。 addAndroidDownloads 属性配置了Android平台的下载行为，包括是否使用下载管理器，显示通知，以及指定下载路径和文件描述。
RNFetchBlob.fetch 发起实际的下载请求。第一个参数是 HTTP 方法（这里是 'GET'），第二个参数是 PDF 文件的 URL。
res.path() 返回下载文件的本地路径。
使用 try...catch 块来处理下载过程中可能出现的错误。

批量下载：

如果需要批量下载多个 PDF 文件，可以使用 Promise.all 并行下载，提高效率：

商汤商量

商汤科技研发的AI对话工具，商量商量，都能解决。

查看详情

const downloadPDFs = async (pdfList) => {
  const downloadPromises = pdfList.map(pdf => downloadPDF(pdf.url, pdf.name));
  try {
    await Promise.all(downloadPromises);
    console.log('All PDFs downloaded successfully!');
  } catch (error) {
    console.error('Error downloading PDFs:', error);
  }
};

// 使用示例
const pdfList = [
  { url: 'URL_1', name: 'file1' },
  { url: 'URL_2', name: 'file2' },
  // ... 更多 PDF 文件
];
downloadPDFs(pdfList);

登录后复制

使用 rn-fetch-blob 下载 PDF 文件 (替代方案)

rn-fetch-blob 是另一个流行的文件操作库，功能与 react-native-blob-util 类似。

安装：

npm install rn-fetch-blob
# 或者
yarn add rn-fetch-blob

登录后复制

基本用法示例：

import RNFetchBlob from 'rn-fetch-blob';

const downloadPDF = async (pdfUrl, fileName) => {
  const { dirs } = RNFetchBlob.fs;
  const path = dirs.DownloadDir + `/${fileName}.pdf`;

  RNFetchBlob.config({
    path: path,
    addAndroidDownloads : {
        useDownloadManager : true,
        notification : true,
        description : 'Downloading file.'
    }
  })
  .fetch('GET', pdfUrl)
  .then((res) => {
    console.log('The file saved to ', res.path());
    alert('PDF Downloaded Successfully.');
  })
  .catch((errorMessage, statusCode) => {
    console.log('Download error:', errorMessage, statusCode);
    alert('Failed to download PDF.');
  });
};

// 使用示例
const pdfURL = 'YOUR_PDF_URL'; // 替换为实际的 PDF 文件 URL
const pdfName = 'document'; // 替换为实际的文件名
downloadPDF(pdfURL, pdfName);

登录后复制

使用 react-native-fs 上传文件

虽然主要讨论的是下载，但如果应用还需要上传文件，可以使用 react-native-fs。

安装：

npm install react-native-fs
# 或者
yarn add react-native-fs

登录后复制

用法示例：

import RNFS from 'react-native-fs';

const uploadFile = async (filePath, uploadUrl) => {
  try {
    const res = await RNFS.uploadFiles({
      toUrl: uploadUrl,
      files: [{
        name: 'file', // 服务器端接收文件的字段名
        filename: 'myFile.pdf',
        filepath: filePath,
        filetype: 'application/pdf'
      }]
    });

    if (res.statusCode === 200) {
      console.log('FILE UPLOADED!');
    } else {
      console.log('SERVER ERROR', res);
    }
  } catch (err) {
    if (err.description === "cancelled") {
      // 上传被取消
      console.log("upload cancelled");
    }
    console.log('UPLOAD ERROR', err);
  }
};

// 使用示例
const filePath = RNFS.DocumentDirectoryPath + '/myFile.pdf'; // 替换为实际的文件路径
const uploadURL = 'YOUR_UPLOAD_URL'; // 替换为实际的上传 API 地址
uploadFile(filePath, uploadURL);

登录后复制

注意事项和总结

错误处理： 在下载过程中，务必进行充分的错误处理，例如检查网络连接状态、处理下载失败的情况等。
存储空间： 考虑设备的存储空间限制，避免下载过多文件导致设备存储空间不足。可以考虑提供选项让用户选择性下载某些文件。
用户体验： 在下载过程中，提供清晰的进度指示，让用户了解下载进度。
权限： 确保应用具有访问文件系统的权限。

通过选择合适的库（如 react-native-blob-util 或 rn-fetch-blob）并采用高效的下载策略（如并行下载），可以有效地解决 React Native 应用中批量下载 PDF 文件的问题，为用户提供良好的离线体验。同时也简要介绍了文件上传可以使用 react-native-fs 库。

以上就是React Native 中批量下载 PDF 文件的最佳实践的详细内容，更多请关注php中文网其它相关文章！