先上一个效果图供大家参考:
具体步骤如下:
第一步、导入并读取Excel功能从整体上来说两种方式,一是前端解析文件后将数据返回给后端,另一种是前端直接将Excel文档返回后台,由后台进行处理。使用哪种方法需要根据具体业务需求,下面简单介绍第一种方法:由前端解析数据
1、引入依赖
npm install -S file-saver xlsx
npm install -D script-loader
npm install xlsx
2、在main.js中引入XLSX
import XLSX from 'xlsx'
Vue.use(XLSX)
3、前面环境和依赖完成之后,我们开始创建Import.vue页面,放一个button上传按钮。
各参数说明可参考官方文档:https://www.jianshu.com/p/84b727a4b58a
<!--limit:最大上传数,on-exceed:超过最大上传数量时的操作 -->
<el-upload