html5 json数据 execle,JS将获取到的JSON数据导出excel表

JS将获取到的JSON数据导出到excel表中，通常有两种方法，导出.cvs纯文本格式，优点是导出速度快，当数据量很大时可以优先考虑，缺点是纯文本是不能进行格式排版的，需要导出带排版格式的文件时，就需要导出成二进制格式的.xls文件。

1. 导出为.cvs文件

相信很多萌新不知道什么是cvs的？我这里简单介绍一下：

逗号分隔值(Comma-Separated Values，CSV，有时也称为字符分隔值，因为分隔字符也可以不是逗号)，其文件以纯文本形式存储表格数据(数字和文本)。纯文本意味着该文件是一个字符序列，不含必须像二进制数字那样被解读的数据。

CSV是一种通用的、相对简单的文件格式，被用户、商业和科学广泛应用。最广泛的应用是在程序之间转移表格数据，而这些程序本身是在不兼容的格式上进行操作的(往往是私有的和/或无规范的格式)。

我们来写的例子：

使用a标签方式将json导出csv文件

导出

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);

}

2. 导出为.xls文件

JS是支持导出二进制的xls格式的，只需要我们用 Blob类转化下，来看看是具体怎么用的。

使用table标签方式将json导出xls文件

导出

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 = '

姓名部门id考勤天数休息天数';

//循环遍历，每行加入tr标签，每个单元格加td标签

for (let i = 0; i < jsonData.length; i++) {

str += '

';

for (let item in jsonData[i]) {

//增加\t为了不让表格显示科学计数法或者其他格式

str += `

${jsonData[i][item]}`;

}

str += '

';

}

let excelHtml = `

${str}

`

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()

}

.xls是可以写入排版格式的，直接上例子：

Document

.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;

}

学生信息
名字	性别	年龄	班级
小明	男	19	1班
小黄	男	20	2班
老王	男	29	3班
总人数：3人

let oHtml = document.getElementsByClassName('tableA')[0].outerHTML;

let excelHtml = `

.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;

}

${oHtml}

`

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();