JS将获取到的JSON数据导出excel表
2019-06-17 本文已影响0人
小小的开发人员
JS将获取到的JSON数据导出到excel表中，通常有两种方法，导出.cvs纯文本格式，优点是导出速度快，当数据量很大时可以优先考虑，缺点是纯文本是不能进行格式排版的，需要导出带排版格式的文件时，就需要导出成二进制格式的.xls文件。
1. 导出为.cvs文件
相信很多萌新不知道什么是cvs的？我这里简单介绍一下：
逗号分隔值（Comma-Separated Values，CSV，有时也称为字符分隔值，因为分隔字符也可以不是逗号），其文件以纯文本形式存储表格数据（数字和文本）。纯文本意味着该文件是一个字符序列，不含必须像二进制数字那样被解读的数据。
CSV是一种通用的、相对简单的文件格式，被用户、商业和科学广泛应用。最广泛的应用是在程序之间转移表格数据，而这些程序本身是在不兼容的格式上进行操作的（往往是私有的和/或无规范的格式）。
我们来写的例子：
<html>
<meta charset=utf-8" />
<head>
<p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
<button onclick='JSONToExcel()'>导出</button>
</head>
<body>
<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文件
JS是支持导出二进制的xls格式的，只需要我们用 Blob类转化下，来看看是具体怎么用的。
<html>
<meta charset=utf-8" />
<head>
<p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
<button onclick='tableToExcel()'>导出</button>
</head>
<body>
<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>
.xls是可以写入排版格式的，直接上例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style media="screen">
.tableA {
border-collapse: collapse;
}
.tableA .title th{
height: 50px;
font-size: 24px;
font-family: '微软雅黑';
font-weight: 700;
}
.tableA tr th {
border: 1px #000 solid;
height: 40px;
background: #efefef;
}
.tableA tr td {
padding: 0 40px;
border: 1px #000 solid;
height: 40px;
text-align: center;
}
.tableA .footer td {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<table bordercolor="black" class="tableA">
<tr class="title">
<th colspan="4">学生信息</th>
</tr>
<tr>
<th>名字</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>19</td>
<td>1班</td>
</tr>
<tr>
<td>小黄</td>
<td>男</td>
<td>20</td>
<td>2班</td>
</tr>
<tr>
<td>老王</td>
<td>男</td>
<td>29</td>
<td>3班</td>
</tr>
<tr class="footer">
<td colspan="4">总人数：3人</td>
</tr>
</table>
<script>
let oHtml = document.getElementsByClassName('tableA')[0].outerHTML;
let excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
.tableA {
border-collapse: collapse;
}
.tableA .title th{
height: 50px;
font-size: 24px;
font-family: '微软雅黑';
font-weight: 700;
}
.tableA tr th {
border: 1px #000 solid;
height: 40px;
background: #efefef;
}
.tableA tr td {
padding: 0 40px;
border: 1px #000 solid;
height: 40px;
text-align: center;
}
.tableA .footer td {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
${oHtml}
</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>
