使用Ionic 3开发Android应用时，如何下载生成的Blob文件？

我之前做Ionic 3项目的时候也碰到过一模一样的问题——用浏览器端的a标签下载逻辑在Android设备上完全没反应，这主要是因为Android WebView对这种DOM触发的下载行为有安全限制，而且Ionic的Hybrid环境下直接操作原生DOM的方式本来就不太适配移动端。下面给你几个靠谱的解决方案：

方案一：使用Ionic Native的File插件（推荐） #

这是最适配Ionic移动端的方式，能避开WebView的限制，步骤如下：

1. 先安装对应版本的依赖插件（Ionic 3要装4.x版本的@ionic-native/file）：

ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file@4

2. 修改你的CSV生成和下载逻辑，用原生插件处理文件写入：

import { File } from '@ionic-native/file';

// 在组件的构造函数里注入File服务
constructor(private file: File) {}

// 重构后的下载方法
downloadCSV() {
  let csv = papa.unparse({ fields: this.headerRow, data: this.csvData });
  // 必须指定正确的MIME类型，同时加BOM头避免中文乱码
  let blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });

  // 选择Android设备上的合法存储路径，externalDataDirectory是应用专属目录，无需额外权限
  const filePath = this.file.externalDataDirectory;
  const fileName = 'confidentialData.csv';

  // 写入文件，replace: true表示覆盖同名文件
  this.file.writeFile(filePath, fileName, blob, { replace: true })
    .then(() => {
      alert(`CSV文件已保存！路径：${filePath}${fileName}`);
    })
    .catch(err => {
      console.error('保存失败：', err);
      alert('保存失败，请检查设备存储权限');
    });
}

3. 配置Android基础权限（在config.xml中添加）：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

如果是Android 6.0及以上系统，还需要动态申请权限，可以搭配@ionic-native/android-permissions插件实现。

方案二：调整原生DOM下载逻辑（临时应急用） #

如果不想引入插件，可以尝试优化原有代码，适配Android WebView的特性：

downloadCSV() {
  let csv = papa.unparse({ fields: this.headerRow, data: this.csvData });
  // 补充BOM头和正确的MIME类型
  let blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
  
  let a = window.document.createElement("a");
  a.href = window.URL.createObjectURL(blob);
  a.download = "confidentialData.csv";
  // 模拟标准鼠标点击事件，部分WebView不识别简单的click()
  document.body.appendChild(a);
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  a.dispatchEvent(clickEvent);
  // 延迟移除元素，确保WebView完成下载处理
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(a.href);
  }, 100);
}

不过这种方式在部分Android机型或WebView版本下仍可能失效，仅作为临时方案使用。

额外注意点 #

• 处理中文内容时必须添加\ufeff BOM头，否则会出现乱码问题；
• 测试时尽量用真机，模拟器的文件系统权限逻辑可能和真机不一致；
• Android 10及以上系统推荐使用应用专属存储路径（如externalDataDirectory），避免访问公共目录的权限限制。

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