今天接到一个需求,导入excel查询
看起来不难,文件传后端就行,但是要分页,没法做到点击下一页时候再传一次{ 文件,pageNum,pageSize }的。因为没法缓存的了文件(起码很麻烦)
————那么我们解析出来,直接传参数给后端就好了————
xlsx.js
引入:
npm i xlsx
import XLSL from 'xlsx'
html:
<input type="file" @change="readWorkbookFromLocalFile" >
js:
readexcel(e) {
//表格导入
const files = e.target.files;
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary"
});
//取第一张表,不懂就看excel左下角
const wsname = workbook.SheetNames[0];
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
let toJson = ws// 转化成功的json
//----------在这上面都可以直接复制----------
//数据构造
let excelJson=[]
toJson.map(x=> {
excelJson.push(x['用户ID'])
})
this.$message.success("导入成功,正在查询")
console.log(excelJson)
} catch (e) {
this.$message.error("导入失败")
return false;
}
};
fileReader.readAsBinaryString(files[0]);
},
看看效果:
每行数据就对应一个数组对象
我构造数据后
ps:
1.这个html有点丑,自己想办法优化样式吧
2.这个插件支持.xls 和 .xlsx 两种格式
3.兼容性