Question

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

Web Api控制器返回＆＃34; byte []＆＃34;

角度服务：

    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。我也不知道该怎么做。

Answer 1

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

我没有Angular经验，但这是我不久前在项目中使用的代码片段。它是纯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>

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

1 个答案: