本文介绍了在 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 库。
