|
项目需要，前端解析简单的excel文件，查找了网上的文章资料，加上按实际需要修改，写出来供大家参考。
项目是vue的，先安装xlsx，这个不用多说，npm install xlsx就完事了。
然后需要在组件中引入一下。
<input @change="getUploadFile" type="file">
我项目中的这个导入用的是原生input输入框。简洁明了。如果觉得样式丑，可以搞个div用定位写在同样的位置，把input设个透明就好了。jquery的更简单，trigger简直不要太好用。
下面是重点，拿到导入的文件，然后解析。为了让大家看的清楚，我把他们都写在input的change事件中了。
getUploadFile (e) {
//拿到所导入文件的名字
let fileName = e.target.files[0]
//定义reader，存放文件读取方法
let reader = new FileReader()
//启动函数
reader.readAsBinaryString(fileName)
//onload在文件被读取时自动触发
reader.onload = function(e) {
//workbook存放excel的所有基本信息
let workbook = XLSX.read(e.target.result, {type: 'binary'})
//定义sheetList中存放excel表格的sheet表，就是最下方的tab
let sheetList = workbook.SheetNames
//存放json数组格式的表格数据
let resultJson = []
//存放字符串数组格式的表格数据
let resultFormulae = []
sheetList.forEach(function(y) {
let worksheet = workbook.Sheets[y]
let json = XLSX.utils.sheet_to_json(workbook.Sheets[y])
let formulae = XLSX.utils.sheet_to_formulae(workbook.Sheets[y])
if(json.length > 0){
//具体如何处理看项目需求，我的项目其实只有一个sheet，在这里写成循环避免大家误会
//数据处理与存放
resultJson.push(json)
resultFormulae.push(formulae)
}
});
//因为我的表格只有一列，因此我取出resultJson第一组数据的key作为键去遍历取出手机号码
let tableHeader = Object.keys(result[0])[0]
let importInfo = result.map((item) => {
return item[tableHeader]
})
};
}
贴出几个关键数据：
从上到下依次为：
console.log(resultJson)
console.log(resultFormulae)
console.log(tableHeader)
console.log(importInfo)
无论小伙伴们用的是什么库和框架，所依赖的js库都是xlsx.js，有的需要直接引入js，有的需要需要像我这样安装依赖包，所以我这里主要展示的是xlsx这个库的使用方法，至于如何引入因项目而宜了。 | 
转播
