React Native 应用中批量下载并管理PDF文件以支持离线访问

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

import RNFS from 'react-native-fs';
import RNFetchBlob from 'react-native-blob-util';
import { PermissionsAndroid, Platform } from 'react-native';

const downloadPdf = async (fileUrl, fileName) => {
  try {
    // 1. 请求存储权限 (Android特有)
    if (Platform.OS === 'android') {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        {
          title: '存储权限',
          message: '应用需要访问您的存储以下载文件。',
          buttonNeutral: '稍后询问',
          buttonNegative: '取消',
          buttonPositive: '确定',
        },
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        console.log('存储权限被拒绝');
        return;
      }
    }

    // 2. 定义下载路径
    // 推荐使用应用私有目录，如 DocumentsDirectory，这样文件不会被系统图库扫描到，
    // 且卸载应用时会自动删除。
    const pdfDir = `${RNFS.DocumentDirectoryPath}/pdfs`;
    const localFilePath = `${pdfDir}/${fileName}`;

    // 3. 确保目录存在
    await RNFS.mkdir(pdfDir, { NSURLIsExcludedFromBackupKey: true }); // iOS防止备份到iCloud

    // 4. 开始下载
    const configOptions = {
      fileCache: false, // 不使用RNFetchBlob的内部文件缓存，我们自己管理
      addAndroidDownloads: {
        useDownloadManager: false, // 不使用系统下载管理器
        notification: false, // 下载时不显示通知
        path: localFilePath, // 指定完整的文件路径
        description: 'Downloading PDF',
      },
      path: localFilePath, // iOS路径
    };

    console.log(`开始下载: ${fileUrl} 到 ${localFilePath}`);
    const res = await RNFetchBlob.config(configOptions).fetch('GET', fileUrl);

    if (res.info().status === 200) {
      console.log(`文件下载成功: ${res.path()}`);
      return res.path(); // 返回下载文件的本地路径
    } else {
      console.error(`文件下载失败，状态码: ${res.info().status}`);
      // 尝试删除可能残留的文件
      await RNFS.unlink(localFilePath).catch(() => {});
      throw new Error(`下载失败: ${res.info().status}`);
    }
  } catch (error) {
    console.error('下载PDF时发生错误:', error);
    throw error;
  }
};

// 示例调用
// const pdfUrl = 'https://www.africau.edu/images/default/sample.pdf';
// const pdfName = 'sample.pdf';
// downloadPdf(pdfUrl, pdfName)
//   .then(path => console.log('PDF已下载到:', path))
//   .catch(err => console.error('下载失败:', err));

const downloadMultiplePdfs = async (pdfList) => {
  const downloadedPaths = [];
  const errors = [];

  // 1. 清理旧的PDF目录（可选，取决于您的更新策略）
  const pdfDir = `${RNFS.DocumentDirectoryPath}/pdfs`;
  if (await RNFS.exists(pdfDir)) {
    console.log('正在清理旧的PDF目录...');
    await RNFS.unlink(pdfDir);
    await RNFS.mkdir(pdfDir, { NSURLIsExcludedFromBackupKey: true });
  } else {
    await RNFS.mkdir(pdfDir, { NSURLIsExcludedFromBackupKey: true });
  }

  // 2. 批量下载
  // 可以使用 Promise.all 进行并发下载，但要注意并发数，避免资源耗尽。
  // 对于100+文件，建议分批处理或使用一个队列。
  // 这里为了简洁，先展示一个简单的并发模式。
  const downloadPromises = pdfList.map(async (pdf) => {
    try {
      const path = await downloadPdf(pdf.url, pdf.name);
      downloadedPaths.push({ name: pdf.name, path: path });
      console.log(`成功下载: ${pdf.name}`);
    } catch (error) {
      console.error(`下载 ${pdf.name} 失败:`, error);
      errors.push({ name: pdf.name, error: error.message });
    }
  });

  // 等待所有下载完成
  await Promise.all(downloadPromises);

  console.log('所有PDF下载任务完成。');
  if (downloadedPaths.length > 0) {
    console.log('成功下载的文件:', downloadedPaths);
  }
  if (errors.length > 0) {
    console.log('下载失败的文件:', errors);
  }

  return { downloaded: downloadedPaths, failed: errors };
};

// 示例调用
// const myPdfFiles = [
//   { url: 'https://www.africau.edu/images/default/sample.pdf', name: 'sample1.pdf' },
//   { url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', name: 'dummy.pdf' },
//   // ... 更多100+文件
// ];
// downloadMultiplePdfs(myPdfFiles)
//   .then(result => {
//     console.log('批量下载结果:', result);
//     // 在这里可以更新Async Storage或Redux store，存储已下载文件的路径
//   })
//   .catch(err => console.error('批量下载过程中发生错误:', err));

import AsyncStorage from '@react-native-async-storage/async-storage';

const getDownloadedPdfList = async () => {
  const pdfDir = `${RNFS.DocumentDirectoryPath}/pdfs`;
  try {
    const files = await RNFS.readDir(pdfDir);
    const pdfFiles = files.filter(item => item.isFile() && item.name.endsWith('.pdf'));
    return pdfFiles.map(file => ({ name: file.name, path: file.path }));
  } catch (error) {
    console.error('读取PDF目录失败:', error);
    return [];
  }
};

// 示例：获取并打印已下载的PDF列表
// getDownloadedPdfList().then(list => console.log('已下载PDF列表:', list));

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

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

const PdfViewer = ({ filePath }) => {
  const source = { uri: `file://${filePath}`, cache: true }; // 注意 'file://' 前缀

  return (
    <View style={{ flex: 1 }}>
      <Pdf
        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={{
          flex: 1,
          width: Dimensions.get('window').width,
          height: Dimensions.get('window').height,
        }}
      />
    </View>
  );
};

// 示例调用
// <PdfViewer filePath={'/data/user/0/com.yourpackage/files/pdfs/sample1.pdf'} />