WebAPI and angular File loading in Excel JS format - file is damaged

Question

I am creating an Excel file in my WebAPI. I “store” it in the storage device, and then I will answer in the following way:

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; 

It looks like the server side patch is working. If I write this memystream to filestream, the file is created and can be opened without any problems.

On the angular side, how can I recreate a file when a button is clicked?

I tried something like this:

 $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(); }) } 

The file was created, but when I tried to open it, it was corrupted ... I tried to change the data type to vnd.ms-excel in angular, but it did not work ... How can I load the file when clicked?

EDIT After Jorg's answer, I tried the following: Return 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 

From what I see, it looks right.

On the client side:

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

An excel file is being created, but it is still corrupted ...

thanks

Answer 1

I had the same problem. The file was on the server side, but upon loading it became damaged.

For me, it decided to add responseType: "arraybuffer" to the server request.

Then, when this line is called, var file = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' }); The data variable must be of type ArrayBuffer , not a string.

Answer 2

The main problem is that, by default, XMLHttpRequest uses the default response type, which is an empty string. See Link. Therefore, your binary data is not processed correctly.

When using the javascript API, you need to take care of the response type for binary data. Otherwise, it will be interpreted as a string.

An API such as angular-file-upload (the latest version is currently 1.1.5), for example, does not allow you to set the response type of data received after upload. I needed to update the API to determine the type of response.