Javascript to export html table to Excel

Question

I need to export the html table in my page to an Excel when user clicks 'Export' button. Now, I found a solution here on stack overflow that works in Firefox.

Export dynamic html table to excel in javascript in firefox browser

Now, it doesn't handle special characters like ö,ü,ö which are common in languages we use here so I wanted to ask if anyone knows how I can export them successfully as well without problems?

Here is my code:

 function tabletoExcel(table, name) {
    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]; }); };
        if (!table.nodeType) table = document.getElementById(table);
        var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML };
        window.location.href = uri + base64(format(template, ctx));

}

With this method you can only export whatever is visible in the page. Are you okay with that approach? — Roland Mai
– Roland Mai, Commented Jun 17, 2013 at 8:56
Yes. That is what I am trying to do. Sometimes, there are names with special characters and they do not get exported correctly. So, I want to know what encoding I should use? — Tulips
– Tulips, Commented Jun 17, 2013 at 9:21
How can I extend this js, in order to export multiples tables html in excel? — Ignacio Chiazzo
– Ignacio Chiazzo, Commented Nov 1, 2015 at 14:06

Roland Mai · Accepted Answer · 2013-06-17 10:59:56Z

68

If you add:

<meta http-equiv="content-type" content="text/plain; charset=UTF-8"/>

in the head of the document it will start working as expected:

<script type="text/javascript">
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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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))
  }
})()
</script>

Updated Fiddle Here.

answered Jun 17, 2013 at 10:59

Roland Mai

31.2k8 gold badges58 silver badges61 bronze badges

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

12 Comments

Bakudan Over a year ago

@seroth You get this error because you are using IE < 10. caniuse.com/#search=btoa

Jason Ebersey Over a year ago

This is not working for me in IE 11. When you click on the Export button it just shows that the page is waiting .

Tom Stickel Over a year ago

"The file format and extension of download.xls don't match" this is a problem as end users do not want to see there and click on Yes ....

Ignacio Chiazzo Over a year ago

How can I export multiples tables with this js?

codemirror Over a year ago

File is downloaded but when opening the file in MS Excel it shows warning for unmatched header and it's extension.

|

Jay · Accepted Answer · 2015-02-05 15:48:50Z

For UTF 8 Conversion and Currency Symbol Export Use this:

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 version="1.0" encoding="UTF-8" standalone="yes"?><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))
  }
})()

Vladimir Georgiev · Accepted Answer · 2015-11-19 19:47:49Z

2

ShieldUI's export to excel functionality should already support all special chars.

answered Nov 19, 2015 at 19:47

Vladimir Georgiev

1,94723 silver badges26 bronze badges

Collectives™ on Stack Overflow

Javascript to export html table to Excel

3 Answers 3

12 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

Comments

Linked

Related