WebAPI和angular JS Excel文件下载-文件已损坏
本文关键字:文件 已损坏 文件下载 Excel angular JS WebAPI | 更新日期: 2023-09-27 18:20:12
我正在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();
})
}
文件已创建,但当我尝试打开它时,它已损坏。。。我试过在angular中将数据类型更改为vnd.ms-excel,但没有成功。。。如何在单击时下载文件?
编辑在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文件,但它仍然损坏。。。
感谢
我也遇到了同样的问题。该文件在服务器端还可以,但下载后已损坏。
对我来说,解决问题的方法是将responseType: "arraybuffer"
添加到服务器请求中。
然后当呼叫该线路var file = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
时data
变量的类型应为ArrayBuffer
,而不是字符串。
主要问题来自以下事实:默认情况下,XMLHttpRequest使用默认的响应类型,即空字符串。请参阅此链接。因此,您的二进制数据没有得到正确处理。
使用javascript API时,需要注意二进制数据的响应类型。否则,它将被解释为字符串。
API,例如angular-file-upload(上一版本当前为1.1.5),不提供设置上传后接收的数据的响应类型的可能性。我不得不更新API来定义响应类型。