Web API和angularJS Excel文件下载 - 文件已损坏

时间:2014-09-02 00:15:51

标签: c# angularjs excel rest asp.net-web-api

我在WebAPI中生成Excel文件。我"存储"它在一个内存流中然后放入响应如下:

var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new StreamContent(ms) };

            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
            result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
            {
                FileName = projectName + ".xlsx"
            };
           // ms.Close();
            return result;

看起来服务器端工作正常。如果我将该内存流写入文件流,则会创建该文件,并且可以毫无问题地打开该文件。

在角度方面,如何在单击按钮时重新创建文件?

我试过这样的事情:

$scope.exportQuotas = function (projectName) {
    homeService.GetQuotas(projectName, $routeParams.token, $scope.selection).then(
             function (data) {
                 var dataUrl = 'data:application/octet-stream;' + data
                 var link = document.createElement('a');
                 angular.element(link)
                   .attr('href', dataUrl)
                   .attr('download', "bl.xlsx")
                   .attr('target', '_blank')
                 link.click();
             })
}

该文件已创建,但是当我尝试打开它时,它已损坏...我已尝试将数据类型更改为vnd.ms-excel in angular但它没有工作... 如何通过点击下载文件?

修改 在Jorg回答之后,我尝试了以下方法: api返回的是:

Status Code: 200
Pragma: no-cache
Date: Tue, 02 Sep 2014 02:00:24 GMT
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Content-Type: application/binary
Access-Control-Allow-Origin: *
Cache-Control: no-cache
X-SourceFiles: =?UTF-8?B?        QzpcVXNlcnNcdHJpaGFuaC5waGFtXFByb2plY3RzXFF1b3RhUXVlcnlcUXVvdGFRdWVyeUFQSVxhcGlccXVvdGFcR2V0?=
Content-Disposition: attachment; filename=O14Y0129AUG.xlsx
Content-Length: 13347
Expires: -1

从我所看到的,它看起来是正确的。

在客户端:

                 var file = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
                 var fileURL = URL.createObjectURL(file);
                 window.open(fileURL);

创建了一个excel文件,但它仍然已损坏...

由于

2 个答案:

答案 0 :(得分:17)

我遇到了同样的问题。该文件在服务器端是正常的,但下载后它就会损坏。

为我解决的问题是将responseType: "arraybuffer"添加到服务器请求中。

然后在调用此行时var file = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' }); data变量的类型应为ArrayBuffer,而不是字符串。

答案 1 :(得分:1)

主要问题来自于默认情况下,XMLHttpRequest使用默认响应类型,即空字符串。见link。因此,您的二进制数据无法正确处理。

使用javascript API时,您需要处理二进制数据的响应类型。否则,它将被解释为String。

像angular-file-upload这样的API(最新版本目前是1.1.5)例如没有提供设置上传后收到的数据响应类型的可能性。我不得不更新API以定义响应类型。