How to export data to excel with AngularJS?

Question

The server response data like this: code screenshot

My angular code:

$scope.export = function() {
    var datas = new Blob([data], { type: 'application/vnd.ms-excel;charset=UTF-8' });
    FileSaver.saveAs(datas, '2016-04-20.xlsx');
}

And Header:

Accept-Range:bytes
Connection:keep-alive
Content-Disposition:attachment; filename=%E8%A1%A5%E8%B4%B4%E8%B5%84%E6%A0%BC%E5%B7%B2%E5%AE%A1%E6%A0%B8%E4%BF%A1%E6%81%AF%E8%A1%A8.xlsx
Date:Tue, 19 Apr 2016 17:23:06 GMT
Transfer-Encoding:chunked
X-Powered-By:Express

Dependencies Angular, FileSaver.js, Blob.js

But i got a wrong file, and can not open, how can i fixed this problem? Thanks!

That's the response type for the old XLS format, not the current XLSX format. — Panagiotis Kanavos
– Panagiotis Kanavos, Commented Aug 4, 2016 at 12:45

Community · Accepted Answer · 2017-05-23 11:45:53Z

3

I had a similar issue. I was able to get a valid file from third tools such as Postman, but not from own my code.

I figured that I forgot to set the responseType to blob on my HTTP request. This seems to be required in order to read binary data correctly.

Example:

$http({
    url: 'your/webservice',
    method: "POST",
    data: json, //this is your json data string
    headers: {
       'Content-type': 'application/json'
    },
    responseType: 'blob'
}).success(function (data, status, headers, config) {
    var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    var objectUrl = URL.createObjectURL(blob);
    window.open(objectUrl);
}).error(function (data, status, headers, config) {
    //upload failed
});

The code comes from this answer.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Jul 16, 2016 at 15:26

Andrew

8,0581 gold badge28 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tammeny Over a year ago

It seems that responseType is the problem, i will try your solution, thank you very much.

Andrew Over a year ago

Hi @Tammeny, did you try out the solution above?

100grams Over a year ago

I had the same issue and adding responseType: 'blob' to the configuration object indeed fixed the issue.

Collectives™ on Stack Overflow

How to export data to excel with AngularJS?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related