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.

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.

• javascript
• angularjs
• excel
• blob
• filesaver.js

• The proper extension for that format is .htm not .xls – Musa Commented Apr 29, 2016 at 12:08
• @musa: thx for your answer but I want to extract it in excel not html – radjiv Commented May 2, 2016 at 0: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 Commented May 2, 2016 at 1:13
• I found this answer very helpful stackoverflow./a/50819212/414744 – Ravi Ranjan Commented Oct 31, 2018 at 11:48

1 Answer 1

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 es from this answer.