Sunday, November 20, 2016

Export a list of array to Excel or CSV in Javascript

Writer m Published Sunday, November 20, 2016

For Chrome:

HTML (Create an onclick button)

<html>
    <body>
        <input class="btn btn-primary" onclick="export_Excel()" 
        title="Export Excel" type="button" value="Export to Excel" />
    </body>
</html>

Javascript

var result_table = [
                    ["Day", "Month", "Year"],
                    ["1", "January", "2016"], 
                    ["2", "February", "2016"],
                    ["3", "March", "2016"],
                    ["4", "April", "2016"],
                   ];

function export_Excel() {
    var lineArray = [];
    result_table.forEach(function (infoArray, index) {
        var line = infoArray.join(",");
        lineArray.push(index == 0 ? "data:application/vnd.ms-excel;charset=utf-8," + line : line);
    });
    var csvContent = lineArray.join("\n");
    window.open(encodeURI(csvContent));
}

JSFiddle Demo

* For those who are using Mozilla Firefox, you may consider to use the method below.

(The above method not working well in my Mozilla Firefox)

For Mozilla Firefox:

HTML (Create an onlick button)

<html>
    <body>
        <a>
           <button type="button" class="btn btn-default" 
           title='Export Excel' onclick="export_Excel()">Excel</button>
        </a>
    </body>
</html>

Javascript

var result_table = [
      ["Day", "Month", "Year"],
                    ["1", "January", "2016"], 
                    ["2", "February", "2016"],
                    ["3", "March", "2016"],
                    ["4", "April", "2016"],
                   ];

function export_Excel() {
    var lineArray = [];
    result_table.forEach(function (infoArray, index) {
       var line = infoArray.join(",");
       lineArray.push(index == 0 ? line : line);
    });
    var csvContent = lineArray.join("\n");
    var excel_file = document.createElement('a');
    excel_file.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvContent));
    excel_file.setAttribute('download', 'Visitor_History.csv');
    document.body.appendChild(excel_file);
    excel_file.click();
    document.body.removeChild(excel_file);
}

JSFiddle Demo