前端读取本地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!!!