Angular 5从Web API下载Excel文件报错：arraybuffer不可分配给json类型

嘿，这个问题我之前迁移项目时也碰到过，其实就是泛型类型和响应类型不匹配导致的TypeScript类型检查报错～

问题原因 #

你用了this.http.post<any>(...)，这里的<any>泛型其实是在告诉TypeScript期望返回JSON类型的数据，但同时你又设置了responseType: 'arraybuffer'，这就产生了类型冲突——TypeScript认为你要的是JSON，可实际返回的是ArrayBuffer，所以就抛出了“类型‘arraybuffer’不可分配给类型‘json’”的错误。

解决方案 #

只需要让泛型和响应类型保持一致就行，有两种简单的处理方式：

方式1：指定正确的泛型类型

把<any>改成<ArrayBuffer>，明确告诉TypeScript返回的是ArrayBuffer类型，这样就不会有类型冲突了：

this.http.post<ArrayBuffer>(`${this.appConfig.api}/users`, users, { responseType: 'arraybuffer' })
  .subscribe((next: ArrayBuffer) => {
    console.log(next);
    // 把ArrayBuffer转成Blob来实现Excel下载
    const blob = new Blob([next], { 
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    });
    // 用a标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(blob);
    downloadLink.download = 'users.xlsx';
    downloadLink.click();
    window.URL.revokeObjectURL(downloadLink.href);
  });

方式2：去掉泛型，让TypeScript自动推断

如果你不想手动指定泛型，也可以直接去掉<any>，TypeScript会根据responseType: 'arraybuffer'自动推断出返回类型是ArrayBuffer：

this.http.post(`${this.appConfig.api}/users`, users, { responseType: 'arraybuffer' })
  .subscribe((next: ArrayBuffer) => {
    console.log(next);
    // 同样处理Blob下载逻辑
  });

额外提示 #

有时候如果遇到TypeScript的类型检查小问题（比如提示responseType的类型不匹配），可以用类型断言来解决，比如把responseType: 'arraybuffer'改成responseType: 'arraybuffer' as 'arraybuffer'，不过一般上面两种方式就足够解决问题啦。

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