最近做个导出功能,秉着前端能做的是绝不扔给后台想法,查了网上资料,大致两种,一种利用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,且样式未缺失,上传也无格式问题