The file format and extension of 'file.xls' don't match with fileSaver.js

Question

I want to save a html table in a excel file, I used fileSaver for angular. But when I download the file and try to open it I receive an annoying popup from excel which say

"The file format and extension of 'report.xls' don't match. The file could be corrupted or unsafe. Unless you trust its source, don't open it. Do you want to open it anyway?"

$scope.exportExcel = function(){

    var data, table;
    table = document.getElementById('tableReport').innerHTML;
    data = new Blob([table], {
        type: 'application/vnd.ms-excel;charset=charset=utf-8'
    });
    return FileSaver.saveAs(data, 'report.xls');
};

How can I fix this popup? Thanks.

@musa: thx for your answer but I want to extract it in excel not html — radjiv, May 02 '16 at 00:59
It is html, and excel expects a .htm extension for that type of file. Specifying an extension is not going to convert data from one format to another — Musa, May 02 '16 at 01:13
I found this answer very helpful https://stackoverflow.com/a/50819212/414744 — Ravi Ranjan, Oct 31 '18 at 11:48

score 1 · Answer 1 · edited May 23 '17 at 12:22

I had a similar issue.

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.

The file format and extension of 'file.xls' don't match with fileSaver.js

1 Answers1