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
– Siddharth, Commented Aug 6, 2011 at 13:55

Jonny Buchanan · Accepted Answer · 2011-08-05 12:24:31Z

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 5, 2011 at 12:24

Jonny Buchanan

62.9k17 gold badges147 silver badges150 bronze badges

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

6 Comments

Siddharth Over a year ago

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

kramden88 Over a year ago

Is there no way to get this to work with IE? Works great in FF but I really need a cross-browser solution.

user1382306 Over a year ago

IE solution here stackoverflow.com/questions/6566831/…

erdimeola Over a year ago

This does not work for special characters. Characters such as i,Ü,Ş,ç,Ö etc. are not being displayed properly.

SearchForKnowledge Over a year ago

Does this work in IE? Also if there are HTML tags inside a column, will it display the output or the raw HTML tags? stackoverflow.com/questions/27805209/…. In IE the URL changes to some encrypted text and states the webpage cannot be displayed.

|

philipvr · Accepted Answer · 2017-04-04 19:44:13Z

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

Thomas · Accepted Answer · 2011-08-05 11:49:16Z

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 5, 2011 at 11:49

Thomas

88.9k13 gold badges126 silver badges162 bronze badges

1 Comment

Thomas Over a year ago

@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 <html><body> header and the corresponding footer, too.

Michał Šrajer · Accepted Answer · 2011-08-05 11:57:21Z

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 5, 2011 at 11:57

Michał Šrajer

31.4k7 gold badges65 silver badges88 bronze badges

2 Comments

Siddharth Over a year ago

I have a button Export to Excel which when clicked dynamic html table will be generated in excel.Please can u help

Michał Šrajer Over a year ago

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.

Collectives™ on Stack Overflow

Export dynamic html table to excel in javascript in firefox browser

4 Answers 4

6 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related