在 Javascript 中以正确的格式导出 HTML 表格
Posted
技术标签:
【中文标题】在 Javascript 中以正确的格式导出 HTML 表格【英文标题】：Exporting HTML table with correct format in Javascript 【发布时间】：2014-09-23 07:21:36 【问题描述】：我有一个表格，我有一个金额列。我想以正确的数字格式导出表格，因为当我导出表格时，我只得到 100 而不是 100.00。
我的桌子是这样的：
ID Code Amount Time
1 1 100.00 2014-09-22 18:59:25
1 1 100.60 2014-09-22 18:59:25
1 1 100.00 2014-09-22 18:59:25
1 1 12.50 2014-09-22 18:59:25
Excel 输出是这样的：
ID Code Amount Time
1 1 100 2014-09-22 18:59:25
1 1 100.60 2014-09-22 18:59:25
1 1 100 2014-09-22 18:59:25
1 1 12.5 2014-09-22 18:59:25
这是我的代码：
<script>
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, filename)
if (!table.nodeType) table = document.getElementById(table)
var ctx =
worksheet: name || 'Worksheet',
table: table.innerHTML
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename;
document.getElementById("dlink").click();
)()
function download()
$(document).find('tfoot').remove();
var name = document.getElementById("name").innerHTML;
tableToExcel('table2', 'Sheet 1', name+'.xls')
setTimeout("window.location.reload()",0.0000001);
var btn = document.getElementById("btn");
btn.addEventListener("click",download);
</script>
有什么方法可以实现吗？我希望我的 Excel 文件看起来与表中的数据完全一样。
【问题讨论】：
【参考方案1】：试试
<td style='mso-number-format:"#,##0.00"'>100.00</td>
在 HTML 表格中。
见小提琴：http://jsfiddle.net/ad3xda1z/1/
问候
阿克塞尔
【讨论】：
谢谢@Axel！像魅力一样工作:) @Adrian：不，因为 IE 不支持将data: URI 用作链接目标。但是整个方法已经过时了，因为有些库确实可以创建Excel 文件格式（*.xls 或*.xlsx）。所以没有必要再把HTML伪装成schemas-microsoft-com:office:excelXML。【参考方案2】：
在 excel 本身中：
默认情况下它不显示.00 - 但您可以在格式化选项中更改它
所以最终会有一个 (xml) 选项来指定单元格格式。
那么格式化代码将类似于0.00
发现：
HTML to Excel: How can tell Excel to treat columns as numbers?some formating code examples
所以你可以尝试在单元格中添加style="mso-number-format:0\.00000;"
其他选项是尝试强制 excel 将单元格内容解释为文本 - 为此，您可以尝试在每个单元格内容前加上 '
我已经构建了一个堆栈 sn-p 示例。 相关代码为：
// deep clone of table
//https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode
var temp_table = document.getElementById('table_XXXX').cloneNode(true);
// get all table cells
var table_cells = temp_table.getElementsByTagName('td');
// console.log("table_cells", table_cells);
// modify all table cells
for (var i = 0; i < table_cells.length; i++)
var cell = table_cells[i];
// console.log("cell", cell);
// cell.textContent = "'" + cell.textContent;
cell.setAttribute("style", "mso-number-format:0\.00000;");
console.log("temp_table", temp_table);
var tableToExcel = (function ()
// var uri = 'data:application/vnd.ms-excel;base64,';
var template = '<html lang="en" xml:lang="en" 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><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="DC.language" content="en"><!--[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>';
// var base64 = function (s)
// return window.btoa(unescape(encodeURIComponent(s)))
// ;
var 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
// return uri + base64(format(template, ctx));
return format(template, ctx);
)()
function saveAsFile(link, content, mimetype, filename)
// https://developer.mozilla.org/en-US/docs/Web/API/Blob
// var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
// var oMyBlob = new Blob(aFileParts, type: 'text/html'); // the blob
// https://***.com/a/16330385/574981
var blob = new Blob([content], mimetype);
var url = URL.createObjectURL(blob);
console.log("update download link:");
var a = link;
a.download = filename;
a.href = url;
// a.textContent = "Download File";
console.log("download link:", a);
function saveAsFile_handleClick(event)
console.log("saveAsFile_handleClick");
// deep clone of table
//https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode
var temp_table = document.getElementById('table_XXXX').cloneNode(true);
// get all table cells
var table_cells = temp_table.getElementsByTagName('td');
// console.log("table_cells", table_cells);
// modify all table cells
for (var i = 0; i < table_cells.length; i++)
var cell = table_cells[i];
// console.log("cell", cell);
// cell.textContent = "'" + cell.textContent;
cell.setAttribute("style", "mso-number-format:0\.000;");
console.log("temp_table", temp_table);
// function saveAsFile(link, content, mimetype, filename);
saveAsFile(
this,
tableToExcel(temp_table, 'Sheet 1'),
type: "application/msexcel",
"test.xls"
);
function initSystem()
console.groupCollapsed("system init:");
// save output button
var saveOutputButton = document.getElementById("saveAsFile");
if (saveOutputButton)
console.log("add click event to '#saveAsFile':");
saveOutputButton.addEventListener('click', saveAsFile_handleClick, false);
console.log("finished.");
console.groupEnd();
/* * pure JS - newer browsers...* */
document.addEventListener('DOMContentLoaded', initSystem, false);#btn
margin: 1em;
tr:hover
background-color: rgba(255, 200, 0, 0.5);
td
padding: 0 1.5em;
text-align: right;
a, a:link
margin: 0px;
padding: 0px;
text-decoration: none;
color: inherit;
cursor: pointer;
display: inline;
a:hover
background-color: rgba(255,190,000,0.5);
/*box-shadow: x y color [blur] [spread] [inset]*/
box-shadow: 0px 0px 5px rgba(255,190,0,0.5), 0px 0px 20px rgba(255,190,0,0.5);
.button, a.button:link
display: block;
width: 20em;
padding: 0.5em;
margin: 1em;
border-radius: 1em;
background-color: rgba(0, 0, 0, 0.35);
box-shadow: 0px 0px 10px rgba(0,0,0,0.2), 0px 0px 10px rgba(255,255,255,0.1) inset;
cursor: pointer;
text-align: center;
.button:hover, a.button:link:hover
background-color: rgba(0, 0, 0, 0.36);
box-shadow: 1px 1px 10px rgba(0,0,0,0.3), 0px 0px 10px rgba(255,255,255,0.1) inset;
<div>
<a class="button" id="saveAsFile" href="#">
Save Table to Excel File
</a>
</div>
<div id="tablecontainer">
<table id="table_XXXX">
<tbody>
<tr>
<th>ID</th>
<th>Code</th>
<th>Amount</th>
<th>Time</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>100.00</td>
<td>2014-09-19 18:59:25</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>100.60</td>
<td>2014-09-20 18:59:25</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>200.00</td>
<td>2014-09-21 18:59:25</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>12.50</td>
<td>2014-09-22 18:59:25</td>
</tr>
</tbody>
</table>
</div>【讨论】：
但我需要在打开文件后立即显示 .00。不是我会打开它。它是客户端。我将如何格式化它？ 您可以尝试将金额转义为文本 - 为此您必须修改表格数据，以便在文本前面添加一个 '。但是你不能再用这个单元格内容计算了。 文字是什么意思？在我的数据来自的数据库中，我已将其类型更改为 varchar，以便它也显示 2 个小数点。 我认为你不能为这个 html 嵌入的东西中的单元格指定格式。您没有生成真正的 xls 文件 - 它是一个嵌入了 html 的 xls 文件 - 所以您没有所有选项来格式化内容。我的想法是遍历 html 表格的内容并在单元格内容前加上一个 ' - 所以 excel 会将这些内容解释为文本。以上是关于在 Javascript 中以正确的格式导出 HTML 表格的主要内容，如果未能解决你的问题，请参考以下文章
在 AngularJS 中以 CSV、Excel、PDF 格式导出数据