Javascript 将 HTML 表格导出到 Excel 时编码 UTF-8
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25730008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Encoding UTF-8 when exporting HTML table to Excel
提问by Josecanalla
I am trying to export an HTML table to Excel using javascript. This is the javascript code
我正在尝试使用 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>
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 entitiesbut not works. I have MS-Excel 2010 and Win7 64 bits.
我无法正确导出 UTF-8 字符，例如 é 或 í。我尝试将 HTML 表作为 UTF8 导入 OO Calc 而不转换为实体，但不起作用。我有 MS-Excel 2010 和 Win7 64 位。
How can I do to export UTF-8 chars correctly?
如何正确导出 UTF-8 字符？
Thanks!
谢谢！
回答by Axel Richter
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.
第二：它应该在您的模板中，因为它包含 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>
回答by C.T
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
将表格数据作为纯文本保存为Excel，没有编码问题
回答by Maurivan
回答by Bastian Salazar
I will cite again a respect that was indicated above. You need to include the meta tag code inside the head tag:
我将再次引用上面指出的一个方面。您需要在 head 标记中包含元标记代码：
<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
这对我有用。但是IE和WIN10因为扩展名为xls，在下载上有一些冲突。但是修正了特殊字符的问题
回答by Nadir Hasimov
if you want to change default file name according to @Axel Richter's answer, try this:
如果您想根据@Axel Richter 的回答更改默认文件名，请尝试以下操作：
var link = document.createElement('a');
link.download = 'filename.xls';
...
link.href = uri + base64(format(template, ctx));
link.click();
...
replace window.location.hrefwith link.href
用link.href替换window.location.href
