共计 1822 个字符,预计需要花费 5 分钟才能阅读完成。
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>
正文完
发表至: javascript
2020-07-13