前端 json 导出 excel

最新推荐文章于 2025-07-15 10:19:50 发布

转载最新推荐文章于 2025-07-15 10:19:50 发布 · 1.8k 阅读

文章标签：

#json #前端 #github #html #excel

java 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种前端实现导出Excel的方法，包括直接利用HTML生成表格及使用json转Excel插件的方式，并对比了两者的优劣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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