Angular+Capacitor安卓端FileReader报错：readAsText参数非Blob类型

问题分析 #

Chrome浏览器正常但Android端报错，核心原因是CapacitorHttp插件在Android上返回的响应格式与Web环境的Fetch API不一致。Web环境中接口返回的是标准Blob，但CapacitorHttp在Android上可能将响应封装为带data字段（类型为ArrayBuffer）的自定义对象，导致FileReader.readAsText接收的参数不符合要求。

解决方案 #

方案1：修改NSWAG生成的blobToText函数，兼容Capacitor响应格式 #

直接调整web.api.client.ts中的blobToText函数，加入类型判断和转换逻辑：

function blobToText(blob: any): Observable<string> {
    return new Observable<string>((observer: any) => {
        if (!blob) {
            observer.next("");
            observer.complete();
            return;
        }

        let targetBlob: Blob;
        // 兼容Web环境的标准Blob
        if (blob instanceof Blob) {
            targetBlob = blob;
        } 
        // 处理Capacitor Android返回的响应格式（带data属性的ArrayBuffer）
        else if (blob.data instanceof ArrayBuffer) {
            targetBlob = new Blob([blob.data]);
        } 
        // 若已经是字符串，直接返回
        else if (typeof blob === 'string') {
            observer.next(blob);
            observer.complete();
            return;
        } 
        // 兜底处理其他未知类型
        else {
            targetBlob = new Blob([JSON.stringify(blob)]);
        }

        const reader = new FileReader();
        reader.onload = (event) => {
            observer.next((event.target as any).result);
            observer.complete();
        };
        // 新增错误处理，避免静默失败
        reader.onerror = (error) => observer.error(error);
        reader.readAsText(targetBlob);
    });
}

方案2：临时禁用CapacitorHttp插件验证问题 #

如果想快速验证是否是CapacitorHttp导致的问题，可以修改capacitor.config.ts，禁用该插件：

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

const config: CapacitorConfig = {
  appId: 'com.myapp.app',
  appName: 'MyApp App',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    cleartext: true,
  },
  plugins: {
    CapacitorHttp: {
      enabled: false, // 禁用插件
    },
  }
};

export default config;

禁用后重新编译测试，如果请求恢复正常，即可确认是CapacitorHttp的响应格式适配问题，再采用方案1的代码修改即可。

方案3：调整NSWAG生成配置 #

在NSWAG的生成配置中，选择使用Angular的HttpClient作为请求客户端，而非依赖原生Fetch的处理逻辑。这样生成的代码会直接利用Angular的响应处理能力，避免手动处理Blob转换的兼容性问题。

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