Encoding UTF-8 when exporting HTML table to Excel

2019-01-11 07:58发布

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!

4条回答
趁早两清
2楼-- · 2019-01-11 08:12

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

查看更多
The star\"
3楼-- · 2019-01-11 08:29

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> 
查看更多
Lonely孤独者°
4楼-- · 2019-01-11 08:30
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

查看更多
混吃等死
5楼-- · 2019-01-11 08:34

Use the code below in the var uri:

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

Output

查看更多
登录 后发表回答