字节数组（Web Api 2）到 blob（Angular 客户端）答案

【问题标题】：Byte array (Web Api 2) to blob (Angular client)字节数组（Web Api 2）到 blob（Angular 客户端）
【发布时间】：2018-08-30 17:46:56
【问题描述】：

我想从 Web Api 下载一个文件，使用 Angular 作为客户端。不幸的是，当我在浏览器上下载它时，我的文件损坏了。我认为这是类型差异的错误。

Web Api 控制器返回“byte[]”

角度服务：

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
    return this.http.post(this.baseUrl + '/MyAction', ac, options)
        .map(res => res.blob())
        .catch(this.handleError);

角度组件 ts

  this.service.downloadXls(items).subscribe(
            data => this.downloadFile(data)),
             error => console.log("Error downloading the file."),
             () => console.info("OK");
  }
  downloadFile(data: Blob) {
    let blob = new Blob([data], { type: 'application/vnd.ms-excel' });
    let url= window.URL.createObjectURL(blob);
    window.open(url);
  }

据我了解，我需要在客户端接收 byte[] 并将其转换为 blob。或者在服务器端转换和发送 blob。我也不知道怎么办。

【问题讨论】：

为什么这被标记为重复？给 OP：你需要使用这个：github.com/eligrey/FileSaver.js
文件保护程序有问题。我使用的方法效果很好。问题是我的文件坏了
您使用的方法“似乎”有效。问题是它没有正确解码，这就是你得到一个损坏的文件的原因。
发布另一个问题，详细说明您在使用 FileSaver 时遇到的问题，我会尽力提供帮助。
我只是从 Java 的角度讲，但我并不完全相信这个问题是骗人的。您要发送的 MIME 类型是什么？

标签： c# .net angular asp.net-web-api asp.net-web-api2

【解决方案1】：

获取二进制流并不是那么简单，我建议您使用FileSaver.js 来完成繁重的工作。

我没有 Angular 经验，但这是我不久前在一个项目中使用的代码 sn-p。它是纯 JavaScript，但只需稍作修改即可在 Angular 上重用：

<html>
  <head>
  <script src="FileSaver.min.js"></script>
  <script>        
    function download() {            
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://your.url", true);
        xhr.setRequestHeader("Content-type","application/json");
        xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        xhr.setRequestHeader("Accept", "application/octet-stream");
        //xhr.setRequestHeader("Authorization", "Bearer ......");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var blob = new Blob([xhr.response], {type: "octet/stream"});
                var fileName = "my_excel_file.xlsx";
                saveAs(blob, fileName);
            }
        }
        xhr.responseType = "arraybuffer";
        xhr.send();
    }        
  </script>
</head>
<body>
  <button onclick="javascript:download()">Download Excel File</button>
</body>
</html>

【讨论】：