纯前端上传 excel 并读取内容生成 json 文件下载到本地
很多时候,产品那边给的资料都是表格形式的,但是我们一般都是用 json 格式。所以才有了这个文档。
话不多说,上代码~~
先去下载两个文件:
1. https://github.com/eligrey/FileSaver.js
2. http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js
望文生义,第一个是文件保存用到的,第二是解析表格用到的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="input"/>
</body>
<script src="xlsx.full.min.js"></script>
<script src="FileSaver.js"></script>
<script>
function importfile(obj) {//导入文件
if (!obj.files) {
alert('文件错误,请重新选择');
return
}
var reader = new FileReader(),
file = obj.files[0];
reader.onload = function (e) {
var data = e.target.result;
var wb = XLSX.read(data, {
type: 'binary'
});
data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) //转成 json 数据
console.log(data)
downloadJson(data)
};
reader.readAsBinaryString(file) //以二进制方式读取
}
function downloadJson(data,filename) {
var blob = new Blob([JSON.stringify(data)], { type: "text/plain;charset=utf-8" });
saveAs(blob, filename || 'data.json');
}
input.onchange=function(){
importfile(input)
}
</script>
</html>
·
测试一下
建个 excel ,叫做 3.xlsx。内容如图:
导出的 json 文件