本文介绍了在 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 并行下载，提高效率：
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 库。