在Android/iOS平台使用Ionic下载Blob文件失败求助

原代码在桌面端正常，但移动端失效的核心原因是：iOS/Android的WebView对Blob URL的处理有严格限制，直接通过a标签点击Blob URL无法触发原生下载流程，iOS会抛出NSOSStatusErrorDomain Code=-10814这类权限错误。

推荐使用Capacitor官方插件实现，完全适配原生平台，以下是具体方案：

方案一：使用Capacitor Filesystem + Share插件（推荐） #

这是Ionic/Capacitor生态下最可靠的文件处理方式，直接和原生文件系统交互，绕过WebView的限制。

步骤1：安装依赖 #

npm install @capacitor/filesystem @capacitor/share
npx cap sync

步骤2：修改下载代码 #

替换原有的tap逻辑，直接处理服务器返回的base64数据：

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { Share } from '@capacitor/share';

// ... 原有HTTP请求代码
return http.post(url, json, {headers : headers}).pipe(
  tap(async data => {
    const fileName = data['fileName'];
    const base64Data = data['data'];

    try {
      // 将base64数据写入设备文档目录
      const savedFile = await Filesystem.writeFile({
        path: fileName,
        data: base64Data,
        directory: Directory.Documents,
        encoding: Encoding.Base64,
      });

      // 调用系统分享面板，让用户选择保存到文件应用或直接打开
      await Share.share({
        title: '已生成Excel文件',
        url: savedFile.uri,
      });
    } catch (error) {
      console.error('文件处理失败:', error);
      // 可在此添加用户提示，比如Ionic Toast
    }
  }),
);

优势 #

• 完全遵循iOS/Android原生文件系统规范，无权限问题
• 支持用户自主选择文件保存位置或打开方式，符合移动端使用习惯
• 无需手动处理Blob转码，直接复用服务器返回的base64数据

方案二：WebView适配（备选，仅部分场景有效） #

如果不想引入插件，可尝试修改Capacitor配置，但仅Android大概率有效，iOS仍可能存在限制：

1. 修改capacitor.config.ts，允许WebView导航到Blob URL：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'your.app.id',
  appName: 'your-app-name',
  webDir: 'www',
  server: {
    allowNavigation: ['blob:*']
  }
};

export default config;

2. 调整原代码的a标签触发逻辑，改用原生事件模拟点击：

// 替换原代码中的a.click()
a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));

注意：这种方式在iOS上仍可能失败，因为WKWebView对Blob URL的下载支持有限，仅作为临时备选方案。

内容的提问来源于stack exchange，提问作者Jonathan Le Cornichone