javascript 使用jQuery将表格数据导出到excel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19824087/
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
Export table data to excel using jQuery
提问by Head Way
I'm using this code:
我正在使用此代码：
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))
}
})()
Here is my submit button:
这是我的提交按钮：
<td><input type="button" onclick="tableToExcel('project_table', 'W3C Example Table')" value="Export to Excel"></td>
The problem I'm having is some of my inputs are dropdowns and inputs but they are hidden on the time of building the excel file. So when the excel files first builds you'll see all the data and within 2 seconds all the data that has the hidden drop downs and inputs behind them go blank and render the html.
我遇到的问题是我的一些输入是下拉菜单和输入，但它们在构建 excel 文件时隐藏。因此，当 excel 文件首次构建时，您将看到所有数据，并且在 2 秒内所有隐藏下拉菜单和输入背后的数据都变为空白并呈现 html。
Pic1:
图一：
Pic2:
图2：
I'm trying to use textExtraction but it's not working for me.
我正在尝试使用 textExtraction，但它对我不起作用。
$('#project_table').tablesorter({
textExtraction: myTextExtraction
});
//todo: try getting the dataTable to work...
// it might be way better, just not sure how it would handle
// adding unrelated rows on the fly (comments)
//$('#project_table').dataTable();
var myTextExtraction = function(node)
{
var elem = $(node);
var theVal = null;
if (elem.hasClass('edit')) {
elem.children().each(function() {
if ($(this).css('display') != 'none') {
if ($(this).is('span')) {
theVal = $(this).text();
} else { //all other element types (input, select, etc)
theVal = $(this).val();
}
}
});
} else {
theVal = elem.text();
}
//console.log(theVal);
var c = node.childNodes.length;
if (c == 1) {
theVal = node.innerHTML.trim();
} else if (c == 5) {
theVal = node.childNodes[3].innerHTML.trim();
}
//console.log(theVal);
return theVal;
}
Can anyone lend a hand, thank you.
谁能帮帮忙，谢谢。
Also if anyone knows an IE8 fix, it seems to only work in chrome and FF.
此外，如果有人知道 IE8 修复程序，它似乎只适用于 chrome 和 FF。
回答by Hugo Gresse
I recommand to use DataTables jQuery plugin which manage sort, search, ajax, export and more. See http://datatables.net
我建议使用管理排序、搜索、ajax、导出等的 DataTables jQuery 插件。见http://datatables.net
回答by xploshioOn
回答by Dane O'Connor
If you can't use the server, an alternative approach may be to add a button to copy the table to a user's clipboard for pasting into excel. This side steps the header problem and gives you a similar level of background control over the extraction.
如果您不能使用服务器，另一种方法可能是添加一个按钮来将表格复制到用户的剪贴板以粘贴到 excel 中。这一方面解决了标题问题，并为您提供了类似级别的提取背景控制。
You can check out a lib like clippyto assist with this (github uses it for repo url copying).
