Encoding UTF-8 when exporting HTML table to Excel

Question

I am trying to export an HTML table to Excel using javascript. This is the javascript code

<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]--></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>

This is my header

<meta http-equiv="content-type" content="application/vnd.ms-excel;" charset="UTF-8">
<meta charset="UTF-8">

This is my table

<table id="tblExport">
   <tr>
      <td>José</td>
      <td>María</td>
   </tr>
</table>

And this is the button which triggers the export

<input type="button" onclick="tableToExcel('tblExport', 'W3C Example Table')" value="Export to Excel">

I can't export the UTF-8 characters correctly, like é or í. I try this Importing HTML table into OO Calc as UTF8 without converting to entities but not works. I have MS-Excel 2010 and Win7 64 bits.

How can I do to export UTF-8 chars correctly?

Thanks!

GhostCat · Accepted Answer · 2017-12-19 10:06:20Z

First: Your header is malformed. It should be:

<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">

And second: It should be into your template, because it contains charset information for Excel.

<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"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><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))
          }
        })()
</script>

your answer is good , and thé function you wrote was helpful for me +1
MS IE does not support data protocol for all use cases. "For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.". So no, no solution for IE with this approach.

Fasoeu · Accepted Answer · 2022-01-19 15:16:32Z

4

You could prepend the content string with the UTF-8 BOM definition:

function ExportToExcel() {
    var BOM = "\uFEFF";
    var htmltabel = document.getElementById("tabella_finale");
    var html = htmltabel.outerHTML;
    window.open('data:application/vnd.ms-excel,'+ encodeURI(BOM + html));
}

answered Jan 19, 2022 at 15:16

Fasoeu

1,32210 silver badges10 bronze badges

Comments

Nadir Hashimov · Accepted Answer · 2019-02-12 08:00:33Z

1

if you want to change default file name according to @Axel Richter's answer, try this:

var link = document.createElement('a');
link.download = 'filename.xls';
...
link.href = uri + base64(format(template, ctx));
link.click();
...

replace window.location.href with link.href

answered Feb 12, 2019 at 8:00

Nadir Hashimov

393 bronze badges

Comments

SherylHohman · Accepted Answer · 2019-03-10 16:53:33Z

1

function exportData(report_id){
    var blob = new Blob([document.getElementById(report_id).innerHTML], {
        type: "text/plain;charset=utf-8;"
    });
    saveAs(blob, "Report.xls");
}

Takes table data as plain text and save as Excel without encoding problem

edited Mar 10, 2019 at 16:53

SherylHohman

18.2k18 gold badges94 silver badges98 bronze badges

answered Feb 28, 2017 at 7:33

C.T

1512 silver badges9 bronze badges

1 Comment

HoldOffHunger Over a year ago

I struggled with making something like this work, there's also an "encoding" property on Blob. But, every excel program is going to interpret "html saved as .xls file" differently, so who knows.

Bastian Salazar · Accepted Answer · 2017-07-28 20:28:44Z

I will cite again a respect that was indicated above. You need to include the meta tag code inside the head tag:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<!--This is what you should include-->
<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
<!---->
<title>Ver Listado Pago</title>
<link href="/Images/Decretos.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet" />
<link href="~/Content/booostrap/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/booostrap/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/booostrap/bootstrap-theme.min.css" rel="stylesheet" />

This has worked for me. But IE and WIN10 have some conflicts for download because of the xls extension. However, the problem of special characters is corrected

soma · Accepted Answer · 2022-03-21 05:47:34Z

0

after googling I found a solution edit file /tableExport/tableExport.js line 280

var base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } // New base64

// var base64data = "base64," + $.base64.encode(excelFile); OLD LINE
var base64data = "base64," + base64(excelFile); // New line with new base64

that is all

answered Mar 21, 2022 at 5:47

soma

711 silver badge10 bronze badges

Comments

Maurivan · Accepted Answer · 2017-03-08 01:46:49Z

-1

Use the code below in the var uri:

var uri = 'data:application/vnd.ms-excel;charset=UTF-8;base64,'

Output

answered Mar 8, 2017 at 1:46

Maurivan

992 bronze badges

Collectives™ on Stack Overflow

Encoding UTF-8 when exporting HTML table to Excel

7 Answers 7

7 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Linked

Related