前端读取本地excel文件内容-el-upload
目录
前端读取本地excel文件内容 (el-upload)
前端读取本地excel文件内容
框架:VUE2 + ELEMENT-UI + XLSX
1、首先安装XLSX
npm i xlsx
2、引入到vue文件
import XLSX, { read } from 'xlsx';
3、使用 el-upload 组件
<template>
<el-upload class="upload-demo" drag :action="/" :on-progress="startUpload" >
<div style="padding: 20px 0;">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<div>Click or drag files here to upload</div>
</div>
</el-upload>
</template>
4、上传并读取
methods: {
startUpload(res, file, fileList) {
const name = file.name.split('.')[1];
if(name != 'xls' && name != 'xlsx') {
this.$message.error('只能上传后缀为xls或xlsx的文件');
return;
}
this.formatUpload(file);
},
formatUpload () {
let reader = new FileReader();
reader.readAsBinaryString(file.raw)
reader.addEventListener('load', e => {
const data = e.target.result;
const wb = XLSX.read(data, { type: 'binary'});
const sheetName = wb.SheetNames[0];
const sheets = wb.Sheets[sheetName];
// dataList就是文件中的内容
const dataList = XLSX.utils.sheet_to_json(sheets);
})
}
}
OK,到这里就已经可以读取到了!
end!!!