前言
开发这个小工具目的是为了提供给前端 JSON 数据，因为客户只提供从数据中台导出的 Excel 表格数据，所以给前端程序员生成好 JSON 数据文件再发给他就行，反正每次客户生成 Excel 还得转换一次。
用到哪些库
jQuery
xlsx
记得把库的地址替换成自己的目录，你可以在这里搜索 xlsx 库，直接搜索“xlsx”，找到对应的资源引用就是了。
注意
第一种方式采用上传文件实现，图方便直接用这个，新建txt改为Html复制粘贴就能直接用。
第二种方式采用异步加载文件实现，某些业务场景下，你可能用得上，代码也放在这儿了，有需要自取。使用时记得把它放到应用服务器 Web 目录下，否则无法读取本地xlsx文件，例如：Tomcat（./webapps）、Apache（./www）、Nginx（./wwwroot）等。或者安装 http-server 使用命令将存放代码块的文件夹设为 Web 目录：
cd [你存放代码的文件路径]
http-server ./ -p 8080
代码
第一种方式，上传文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>xlsx导出为json</title>
<script src="./static/"></script>
<script src="./static/"></script>
</head>
<body>
<div style="margin:20px">
<p id="tips"></p>
<input id="fileExcel" type="file" onchange="getExcelData(this)" style="width: 320px;">
</div>
<script>
//读取Excel数据
function getExcelData(obj) {
$("#tips").html("正在读取，请稍后...");
$("#fileExcel").css("display", "none");
var reader = new FileReader();
//文件加载完成后调用
reader.onload = function(e) {
var data = e.target.result;
const workbook = XLSX.read(data, {
type: 'array'
})
//获取json格式的Excel数据
var jsonData0 = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {
defval: 'null' //单元格为空时的默认值
});
//表格存在多个 Sheet 可以使用下标获取数据
//var jsonData1 = .sheet_to_json([[1]], {});
// 如果表格内存在日期，需要处理一下
/* for (var i = 0; i < ; i++) {
jsonData0[i]["日期"] = formatDate(jsonData0[i]["日期"]);
} */
download("", JSON.stringify(jsonData));
$("#tips").html("");
$("#fileExcel").css("display","block");
};
//加载文件
reader.readAsArrayBuffer(obj.files[0]);
}
//下载文件
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
if (document.createEvent) {
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
} else {
pom.click();
}
}
//将excel日期转为字符串格式
var format = "-";
function formatDate(numb) {
const time = new Date((numb - 1) * 24 * 3600000 + 1)
time.setYear(time.getFullYear() - 70)
const year = time.getFullYear() + ''
const month = time.getMonth() + 1 + ''
const date = time.getDate() - 1 + ''
if (format && format.length === 1) {
return year + format + month + format + date
}
return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}
</script>
</body>
</html>
第二种方式，异步加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>xlsx导出为json</title>
<!-- 先替换为自己的库 -->
<script src="./static/"></script>
<script src="./static/"></script>
</head>
<body>
<div>
<button id="btn1" type="button">读取Excel并转为JSON</button>
<p id="loading" style="display: none;">读取中...</p>
</div>
<script>
/*/SheetJS/sheetjs/*/
var flag = true;
$("#btn1").click(function() {
if (flag) {
$("#btn1").hide();
$("#loading").show();
flag = false;
jQuery.ajax({
url: './',
cache: false,
xhr: function() {
var xhr = new XMLHttpRequest()
xhr.responseType = 'blob'
return xhr
},
success: function(data) {
var reader = new FileReader();
//加载文件
reader.readAsArrayBuffer(data);
//文件加载完成后调用
reader.onload = function(e) {
var data = e.target.result;
const workbook = XLSX.read(data, {
type: 'array'
})
var jsonData0 = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {});
//表格存在多个 Sheet 可以使用下标获取数据
//var jsonData1 = .sheet_to_json([[1]], {});
// 如果表格内存在日期，需要处理一下
/* for (var i = 0; i < ; i++) {
jsonData0[i]["日期"] = formatDate(jsonData0[i]["日期"]);
} */
$("#btn1").show();
$("#loading").hide();
download("", JSON.stringify(jsonData0));
};
},
error: function() {}
})
}
})
//下载文件
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
if (document.createEvent) {
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
} else {
pom.click();
}
}
//将excel日期转为字符串格式
var format = "-";
function formatDate(numb) {
const time = new Date((numb - 1) * 24 * 3600000 + 1)
time.setYear(time.getFullYear() - 70)
const year = time.getFullYear() + ''
const month = time.getMonth() + 1 + ''
const date = time.getDate() - 1 + ''
if (format && format.length === 1) {
return year + format + month + format + date
}
return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}
</script>
</body>
</html>