最近做个导出功能,秉着前端能做的是绝不扔给后台想法,查了网上资料,大致两种,一种利用html直接输入excel ,一种是利用github上json 转excel。

首先说下第一种:

 

function JSONToExcelConvertor(JSONData, FileName, ShowLabel,worksheet) {
//先转化json
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
 
var excel = '<table>';
 
//设置表头
var row = "<tr>";
for (var i = 0, l = ShowLabel.length; i < l; i++) {
row += "<td>" + ShowLabel[i] + '</td>';
}
 
 
//换行
excel += row + "</tr>";
 
//设置数据
for (var i = 0; i < arrData.length; i++) {
var row = "<tr>";
 
for (var key in arrData[i]) {
var value = arrData[i][key] == null ? "" : arrData[i][key];
 
row += '<td>' + value + '</td>';
}
 
excel += row + "</tr>";
}
 
excel += "</table>";
 
var excelFile = "<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'>";
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
excelFile += "<head>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += worksheet;
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body>";
excelFile += excel;
excelFile += "</body>";
excelFile += "</html>";
 
 
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
 
var link = document.createElement("a");
link.href = uri;
 
link.style = "visibility:hidden";
link.download = FileName + ".xls";
 
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
 

经测试,可以生成正常的excel.xls 格式,打开后样式有缺失,最重要的是如果拿该表格重新做导入上传,利用xlsm.js插件无法导入,具体缺少什么尚未发现。

只能另想办法了,继续上网搜资料json 转excel ,在github上有大神提供现成的插件,非常感谢!

 

https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js
在js中引入该插入后,导出excel变的非常简单
function JsonToExcel(jsonData,fileName,sheetName,sheetHeader) {
var option = {};
option.fileName = fileName;
option.datas = [
{
sheetData : jsonData,
sheetName : sheetName,
sheetHeader : sheetHeader
}
];
var toExcel=new ExportJsonExcel(option);
toExcel.saveExcel();
}

而且测试发现,格式是最新的xlsm,且样式未缺失,上传也无格式问题