WebAPI和angularJS JS文件下载 – 文件损坏
我在我的WebAPI中生成一个Excel文件。 我将它“存储”在一个内存stream中,然后放入响应中,如下所示:
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;
它看起来像服务器端正在工作正确。 如果我正在将该内存stream写入文件stream,则会创build该文件并可以毫无问题地打开该文件。
在angular度方面,如何在点击button时重新创build文件?
我尝试了这样的事情:
$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(); }) }
该文件是创build,但当我试图打开它,它已损坏…我试图改变数据typesvnd.ms-excel在angular度,但它没有工作…我怎样才能得到的文件是点击下载?
编辑乔吉答案后,我试了下面: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文件被创build,但它仍然损坏…
谢谢
我有同样的问题。 该文件是确定的服务器端,但下载后变得腐败。
解决这个问题的方法是将responseType: "arraybuffer"
添加到服务器请求中。
然后当调用这行var file = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
data
variables应该是ArrayBuffer
types,而不是string。
主要的问题来自这样一个事实:默认情况下,XMLHttpRequest使用默认的响应types,它是一个空string。 看到这个链接 。 因此您的二进制数据处理不当。
使用JavaScript API时,需要注意二进制数据的响应types。 否则,它将被解释为一个string。
例如angular-file-upload(最新版本当前是1.1.5)等API不提供设置上载后收到的数据响应types的可能性。 我不得不更新API来定义响应types。