1、导出为.csv格局（不兼容ie）
<html>
<meta charset=utf-8>
<head>
</head>
<body>
<button onclick='JSONToExcel()'>导出</button>
<script>
function JSONToExcel(){
// 要导出的json数据，这部分数据能够来自ajax申请
const jsonData = [
{
"name": "常健",
"dept": "挪动研发部",
"id": "1",
"attendance": 10,
"rest": 20
},
{
"name": "陈熙文",
"dept": "挪动研发部",
"id": "2",
"attendance": 20,
"rest": 10
},
{
"name": "迟野",
"dept": "挪动研发部",
"id": "3",
"attendance": 0,
"rest": 30
}
]
//列题目，逗号隔开
let str = `姓名,部门,id,考勤天数,劳动天数\n`;
//减少\t为了不让表格显示迷信计数法或者其余格局
for(let i = 0; i < jsonData.length; i++){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n';
}
//encodeURIComponent解决中文乱码， \ufeff是 ""
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创立a标签实现
let link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "考勤月度统计.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
2、导出为.xls格局（不兼容ie firefox）
<html>
<meta charset=utf-8>
<head>
</head>
<body>
<button onclick='tableToExcel()'>导出</button>
<script>
function tableToExcel() {
//要导出的json数据
const jsonData = [
{
"name": "常健",
"dept": "挪动研发部",
"id": "1",
"attendance": 10,
"rest": 20
},
{
"name": "陈熙文",
"dept": "挪动研发部",
"id": "2",
"attendance": 20,
"rest": 10
},
{
"name": "迟野",
"dept": "挪动研发部",
"id": "3",
"attendance": 0,
"rest": 30
}
]
//列题目
let str = '<tr><td>姓名</td><td>部门</td><td>id</td><td>考勤天数</td><td>劳动天数</td></tr>';
//循环遍历，每行退出tr标签，每个单元格加td标签
for (let i = 0; i < jsonData.length; i++) {
str += '<tr>';
for (let item in jsonData[i]) {
//减少\t为了不让表格显示迷信计数法或者其余格局
str += `<td>${jsonData[i][item]}</td>`;
}
str += '</tr>';
}
let excelHtml = `
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<table>
${str}
</table>
</body>
</html>
`
let excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})
// 创立一个a标签
let oA = document.createElement('a');
// 利用URL.createObjectURL()办法为a元素生成blob URL
oA.href = URL.createObjectURL(excelBlob);
// 给文件命名
oA.download = '考勤月历统计表.xls';
// 模仿点击
oA.click()
}
</script>
</body>
</html>
发表回复