WebAPI和角JS文件下载-文件损坏

Question

我正在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的角度，但它没有工作.如何让文件按一下下载？

在回答之后，我尝试了以下内容: 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文件被创建，但它仍然被破坏.

谢谢

Answer 1

我也有同样的问题。该文件是OK服务器端，但当下载时，它变得损坏。

解决这个问题的方法是将responseType: "arraybuffer"添加到服务器请求中。

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

Answer 2

主要问题来自这样一个事实:默认情况下，XMLHttpRequest使用默认响应类型，这是一个空字符串。看这个链接。因此，您的二进制数据无法正确处理。

当使用javascript时，您需要处理二进制数据的响应类型。否则，它将被解释为字符串。

例如，像角文件上传(最近的版本是1.1.5)一样，API不提供在上传后设置接收数据的响应类型的可能性。我必须更新API来定义响应类型。