将HTML表格导出为Excel时使用UTF-8编码

20

我正尝试使用JavaScript将HTML表格导出到Excel。这是JavaScript代码:

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

这是我的标题

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

这是我的桌子

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

这是触发导出的按钮

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

我无法正确导出UTF-8字符,比如é或í。我尝试了这个将HTML表格作为UTF8导入OO Calc而不转换为实体,但没有效果。我使用的是MS-Excel 2010和Win7 64位。

我该如何才能正确地导出UTF-8字符呢?

谢谢!

7个回答

52

首先:你的标题格式不正确。正确格式应该是:

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

第二:它应该放在您的模板中,因为它包含了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> 

9
你能分享一下你找到的简单解决方案吗?谢谢! - Icaro Bombonato
1
感谢分享简单的解决方案 :D - Sal
3
那么简单的解决方案是什么? - Espen Schulstad
1
有关于“更简单的解决方案”有什么新消息吗?^_^ - Pierre
微软IE浏览器不支持所有用例的"data"协议。"出于安全原因,数据URI仅限于下载资源。数据URI不能用于导航、脚本或填充框架或iframe元素。"。因此,这种方法在IE上没有解决方案。 - Axel Richter
显示剩余3条评论

4
你可以在内容字符串前加上UTF-8 BOM定义:
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));
}

1

如果您想根据 @Axel Richter 的答案更改默认文件名 (链接), 请尝试以下方法:

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

window.location.href 替换为 link.href

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

将表格数据作为纯文本保存为Excel,无编码问题。

我曾经为让这样的东西工作而苦苦挣扎,Blob 上也有一个“编码”属性。但是,每个 Excel 程序都会以不同的方式解释“保存为 .xls 文件的 HTML”,所以谁知道呢。 - HoldOffHunger

0
我再次引用上面提到的一点。您需要在head标签内包含meta标签代码:
<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" />

这对我有用。但是由于xls扩展名,IE和WIN10在下载方面存在一些冲突。不过,特殊字符的问题已经得到纠正。


0

在谷歌搜索后我找到了一个解决方案,编辑文件 /tableExport/tableExport.js 的第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

就是这样


-1

在变量uri中使用以下代码:

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

输出


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接