前端 json 导出 excel

来源：互联网发布：左轮网吧计费软件编辑：程序博客网时间：2024/06/07 03:45

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

首先说下第一种：

functionJSONToExcelConvertor(JSONData, FileName, ShowLabel,worksheet) {

//先转化json

vararrData = typeofJSONData != 'object'? JSON.parse(JSONData) : JSONData;

varexcel = '<table>';

//设置表头

varrow ="<tr>";

for(vari =0,l = ShowLabel.length;i <l;i++) {

row+= "<td>"+ ShowLabel[i] +'</td>';

}

//换行

excel+= row+ "</tr>";

//设置数据

for(vari =0;i <arrData.length;i++) {

varrow ="<tr>";

for(varkey inarrData[i]) {

varvalue = arrData[i][key] == null ? "": arrData[i][key];

row+= '<td>'+ value+ '</td>';

}

excel+= row+ "</tr>";

}

excel+= "</table>";

varexcelFile = "<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>";

varuri ='data:application/vnd.ms-excel;charset=utf-8,'+ encodeURIComponent(excelFile);

varlink =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) {
varoption = {};
option.fileName= fileName;
option.datas= [
{
sheetData: jsonData,
sheetName: sheetName,
sheetHeader: sheetHeader
}
];
vartoExcel=newExportJsonExcel(option);
toExcel.saveExcel();
}

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

阅读全文

0 0