最近因项目需要，要从HTML中多个table下载数据保存到excel对应的sheet中，其中还包括有隐藏的table(用Bootstrap 折叠（Collapse）插件做了数据展示折叠)。本来想从后端去做，因为table有多个，感觉太麻烦了，想着直接能前端生成最方便，找了下资料，还是有Jquery直接下载成excel的插件。列取一下：
1.https://github.com/JackGit/table2excel.js 借助ExcelJS使用的一个优秀的开源项目，但是现版本不支持隐藏table下载，作者回复是因为无法计算样式，会在下一个版本中发布，支持ES5/ES6。
2.http://sheetjs.com/ 成熟的产品，DataTables 的Excel下载功能就是借助此插件。
3.jquery.table2excel,github地址：https://github.com/rainabba/jquery-table2excel 简单的插件，但是我试了只支持下载一个。
4.https://blog.csdn.net/chc183/article/details/80929658 这篇博客提供下载多个table到sheet中。其原理与3相似。
解决方案
综合上面资料决定还是根据3和4进行修改实现自己的功能，主要是方便以后可以定制功能。这个方案的关键点是MIME type，设置data:application/vnd.ms-excel; 根据内容拼接xml。最后保存为excel。整个原理相对简单，直接上代码：
//table2excel.js
//selector:tableId的数组;sheets:sheet的名字数组;filename:生成文件名字，后缀必须为xls
//调用方法 $.table2excel({selector:$(".test"),sheets: ['name1', 'name2'], filename:"testExport.xls"});
(function ($) {
$.extend({
table2excel: function (options) {
tablesToExcel(options)
}
});
defaults = {
selector: 'table',
sheets: [],
filename: "table2excel.xls"
};
function tablesToExcel(options) {
var uri = 'data:application/vnd.ms-excel; charset=UTF-8,'
, tmplWorkbookXML = ''
+ ''
+ ''
+ ''
+ ''
+ ' '
+ '{worksheets} '
, tmplWorksheetXML = '{columns}{rows}
{data}'
, format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; })
},
exclude_inputs = function (string) {
var _patt = /(\s+value\s*=\s*"([^"]*)"|\s+value\s*=\s*'([^']*)')/i;
return string.replace(/]*>|<\/input>/gi,
function myFunction(x) {
var res = _patt.exec(x);
if (res !== null && res.length >= 2) {
return res[2];
} else {
return "";
}
});
},
exclude_img = function (string) {
var _patt = /(\s+alt\s*=\s*"([^"]*)"|\s+alt\s*=\s*'([^']*)')/i;
return string.replace(/]*>/gi, function myFunction(x) {
var res = _patt.exec(x);
if (res !== null && res.length >= 2) {
return res[2];
} else {
return "";
}
});
},
exclude_links = function (string) {
return string.replace(/]*>|<\/a>/gi, "");
},
getStrLength = function (str) {
str= str.replace(/[\r\n]/g,"");
var cArr = str.match(/[^\x00-\xff]/ig);
return str.length + (cArr == null ? 0 : cArr.length);
}
var a;
var ctx = "";
var workbookXML = "";
var worksheetsXML = "";
var rowsXML = "";
var columnsXml = "";
var tables = [].slice.call(
typeof options.selector === 'string'
? document.querySelectorAll(options.selector)
: options.selector
);
$(tables).each(function (i, table) {
var columns=[]
$(table).find('tr').each(function (r, rows) {
if ($(rows).children()[0].localName == 'th') {
rowsXML += '';
} else {
rowsXML += '';
}
$(rows).find('th,td').each(function (c, cell) {
var dataFormula = $(cell).html();
dataFormula = exclude_img(dataFormula);
dataFormula = exclude_inputs(dataFormula);
dataFormula = exclude_links(dataFormula);
ctx = {
attributeStyleID: ''
, nameType: 'String'
, data: dataFormula
, attributeFormula: ''
};
rowsXML += format(tmplCellXML, ctx);
//th
if (cell.localName == "th") {
var initLength =getStrLength( dataFormula) * 7;
if (typeof columns[c] === "undefined" || $(columns[c]).attr("ss:Width") < getStrLength(dataFormula) * 7) {
initLength = getStrLength(dataFormula) * 7
ctx = {
length: initLength,
}
columns[c] = format(tmplColumn, ctx);
}
}
//td
if ($(columns[c]).attr("ss:Width") < getStrLength(dataFormula) * 5.12) {
ctx = {
length: getStrLength(dataFormula) * 5.12,
}
columns[c] = format(tmplColumn, ctx);
}
});
rowsXML += '
'
});
var sheetName = 'Sheet' + (i+1);
if (options.sheets != null) {
sheetName = options.sheets[i] || sheetName;
}
$.each(columns, function (e, item) {
columnsXml += item;
})
ctx = { columns: columnsXml, rows: rowsXML, nameWS: sheetName };
worksheetsXML += format(tmplWorksheetXML, ctx);
rowsXML = "";
columnsXml = "";
});
ctx = { created: (new Date()).getTime(), worksheets: worksheetsXML };
workbookXML = format(tmplWorkbookXML, ctx);
var isIE = /*@cc_on!@*/false || !!document.documentMode; // this works with IE10 and IE11 both :)
if (isIE) {
if (typeof Blob !== "undefined") {
workbookXML = [workbookXML];
var blob1 = new Blob(workbookXML, { type: "text/html" });
window.navigator.msSaveBlob(blob1, options.filename);
} else {
txtArea1.document.open("text/html", "replace");
txtArea1.document.write(workbookXML);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, options.filename);
}
} else {
var blob = new Blob([workbookXML], { type: "application/vnd.ms-excel" });
window.URL = window.URL || window.webkitURL;
link = window.URL.createObjectURL(blob);
a = document.createElement("a");
a.download = options.filename;
a.href = link;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
};
})( jQuery);
有如下html页面，包含两个table：
页面代码太多，直接截图了
下载的excel：
定制方法
Excel内容都是XML格式数据，那我们可以根据自己的需要去修改生成的XML。但是也要遵循数据的格式，找到下载的Excel，先打开保存一下，记住一定要保存为当前格式，这样会为我们自动格式化XML,然后再右键用文本格式打开文件，我这里用的是editplus，看起来比较直观。各个节点很清晰，然后根据需要，去修改Excel文件，再观察文本里的节点变化，相应的修改JS。
遗留问题
虽然能够实现功能，但是再有些地方仍需改进。比如对单元格长度的控制，希望根据内容自动匹配长度，目前没有找到很好的解决方案，现在是根据字符（包括中文）进行计算长度，然后按照比例进行计算长度，但是涉及到字母的大小写，空格等问题，也不是很准确，只能说够用吧。
希望有高手提供更好的解决方法。