Export dynamic html table to excel in javascript in firefox browser

Question

Want to Export dynamic html table to excel in javascript is there any way can i do do in firefox browser without using activex object in code .please help me

Jsp code contains a button Export to Excel which when clicked dynamic table in the grid will be generated in excel with css.This button code is connected with JavaScript — Siddharth, Aug 06 '11 at 13:55

score 41 · Answer 1 · answered Aug 05 '11 at 12:24

41

Here's a function for doing this in Firefox with JavaScript, assuming the user has Excel installed on their machine:

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
  }
})()

jsFiddle live example:

http://jsfiddle.net/insin/cmewv/

answered Aug 05 '11 at 12:24

Jonny Buchanan

61,926
17
143
150

2

thanks its working just a minor problem its not exporting the css from the table to excel how could i do this in this function.Can u plz help me – Siddharth Aug 08 '11 at 07:31
1

Is there no way to get this to work with IE? Works great in FF but I really need a cross-browser solution. – kramden88 Mar 26 '12 at 14:25
IE solution here http://stackoverflow.com/questions/6566831/how-to-export-html-table-to-excel-using-javascript – Oct 08 '12 at 20:46
3

This does not work for special characters. Characters such as i,Ü,Ş,ç,Ö etc. are not being displayed properly. – erdimeola Aug 13 '13 at 08:47
Does this work in IE? Also if there are HTML tags inside a column, will it display the output or the raw HTML tags? http://stackoverflow.com/questions/27805209/how-to-keep-html-format-in-excel-sheet-while-exporting-from-a-html-table. In IE the URL changes to some encrypted text and states the webpage cannot be displayed. – SearchForKnowledge Jan 07 '15 at 13:53
@JonnyBuchanan How can I update this to export xlsx instead of xls? – Tot Zam Oct 27 '16 at 15:52

score 12 · Answer 2 · edited Apr 04 '17 at 19:44

You can dynamically generate the Excel file in SpreadsheetDataXML format which allows you to custom the table, cell styles and format in HTML syntax.

To make this work in IE you'll need to use Blob object and then call msSaveBlob method. For FF and Chrome, you can just change the data of href to data:application/vnd.ms-excel

function fnExcelReport() {
    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';

    tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';

    tab_text = tab_text + "<table border='1px'>";
    tab_text = tab_text + $('#myTable').html();
    tab_text = tab_text + '</table></body></html>';

    var data_type = 'data:application/vnd.ms-excel';

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        if (window.navigator.msSaveBlob) {
            var blob = new Blob([tab_text], {
                type: "application/csv;charset=utf-8;"
            });
            navigator.msSaveBlob(blob, 'Test file.xls');
        }
    } else {
        $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
        $('#test').attr('download', 'Test file.xls');
    }
}

Working example: http://jsfiddle.net/h42y4ke2/21/ YT tutorial: https://www.youtube.com/watch?v=gx_yGY6NHkc

can we download file same way in the extension of 'xlsx'? – Kavya Shree Jan 27 '20 at 11:28 — Kavya Shree, Jan 27 '20 at 11:28

score 0 · Answer 3 · answered Aug 05 '11 at 11:49

0

AFAIK there's no library for creating a real excel file in JavaScript but you might try and export the table in HTML to a file with .xls extension.

answered Aug 05 '11 at 11:49

Thomas

87,414
12
119
157

@Siddharth, have a look at how to write files using JavaScript and then just iterate over the DOM portion that represents the table and write the corresponding HTML to the file. Note that you'd need to add the `` header and the corresponding footer, too. – Thomas Aug 08 '11 at 10:52

score 0 · Answer 4 · answered Aug 05 '11 at 11:57

0

There is an extension table2clipboard for firefox. You can also generate csv output from DOM tree manually and let user save it as csv file. Excel can import from CSV.

answered Aug 05 '11 at 11:57

Michał Šrajer

30,364
7
62
85

I have a button Export to Excel which when clicked dynamic html table will be generated in excel.Please can u help – Siddharth Aug 06 '11 at 13:39
In pure javascript you can generate scv file using Data URI scheme. But this have several limitation. Other option is to post data back to server, and let the server construct CSV file and serve it. – Michał Šrajer Aug 06 '11 at 13:58

Export dynamic html table to excel in javascript in firefox browser

4 Answers4

Linked