React Native如何从后端Blob响应生成URL并实现文件下载？

核心前提 #

你拿到的响应只是Blob的元数据，不是实际文件内容，必须先通过blobId调用后端的文件下载接口，获取真正的文件二进制数据，再进行本地保存。React Native没有浏览器环境的Blob和Data URL原生支持，需要借助文件系统库实现下载。

实现步骤 #

1. 安装依赖 #

如果是裸React Native项目，安装react-native-fs；如果是Expo项目，使用expo-file-system：

# 裸项目
npm install react-native-fs --save
# Expo项目
npx expo install expo-file-system

2. 结合react-query和Axios实现下载逻辑 #

以下是完整的代码示例，包含从获取Blob元数据到保存文件的流程：

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';
import RNFS from 'react-native-fs'; // 裸项目用这个
// import * as FileSystem from 'expo-file-system'; // Expo项目用这个

// 获取Blob元数据（你现有逻辑）
const getBlobMetadata = async () => {
  const response = await axios.get('/your-backend-blob-metadata-api');
  return response.data._data;
};

// 通过blobId下载文件并保存到本地
const downloadAndSaveFile = async (blobMetadata) => {
  // 1. 请求实际文件二进制数据，必须设置responseType为'arraybuffer'
  const fileResponse = await axios.get(`/your-backend-download-api?blobId=${blobMetadata.blobId}`, {
    responseType: 'arraybuffer',
  });

  // 2. 确定本地保存路径（示例：保存到系统文档目录）
  const localPath = `${RNFS.DocumentDirectoryPath}/${blobMetadata.name}`;
  // Expo项目路径写法：`${FileSystem.documentDirectory}${blobMetadata.name}`

  // 3. 将二进制数据写入本地文件
  await RNFS.writeFile(localPath, fileResponse.data, 'base64');
  // Expo项目写法：await FileSystem.writeAsStringAsync(localPath, Buffer.from(fileResponse.data).toString('base64'), { encoding: FileSystem.EncodingType.Base64 });

  return localPath;
};

// 使用react-query的useMutation组合完整流程
const useDownloadInvoice = () => {
  return useMutation({
    mutationFn: async () => {
      const blobMetadata = await getBlobMetadata();
      return await downloadAndSaveFile(blobMetadata);
    },
    onSuccess: (localPath) => {
      console.log('文件保存成功，路径：', localPath);
      // 这里可添加通知、文件预览或分享逻辑
    },
    onError: (error) => {
      console.error('下载失败：', error);
    },
  });
};

// 组件中调用示例
const DownloadComponent = () => {
  const { mutate, isLoading } = useDownloadInvoice();

  return (
    <Button
      title={isLoading ? '下载中...' : '下载发票'}
      onPress={mutate}
      disabled={isLoading}
    />
  );
};

关键注意事项 #

• Axios响应类型：必须设置responseType: 'arraybuffer'，否则Axios会把二进制数据解析成字符串，导致文件损坏。
• 权限配置：确保在AndroidManifest.xml（Android）或Info.plist（iOS）中配置了文件读写权限。
• Data URL误区：React Native中生成Data URL无法直接触发系统下载，最终还是要写入本地文件系统，直接处理二进制流更高效。

内容的提问来源于stack exchange，提问作者Ahmed Mohsen