vue+element 前端解析excel并表格展示

首先引入依赖模块：

npm install xlsx --save

在需要解析excel的页面(vue文件)中引入依赖：

import XLSX from 'xlsx'

页面部分：

使用elementUI组件完成文件上传：

		
        
          
          

            将文件拖到此处，或
            点击上传
          
          
1次只能上传1个xls文件，且不超过500kb
        

表格显示：

JS部分：

首先data中声明： listTable: [] 用于记录解析表格生成的表格数据
重要代码就是uploadFile方法来解析excel：

	//解析excel
    async uploadFile(params) { 
      const _file = params.file;
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: 'binary'
          });
          for (let sheet in workbook.Sheets) {
            //循环读取每个文件
            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
            //若当前sheet没有数据，则continue
            if(sheetArray.length == 0){
              continue;
            }
            console.log("读取文件");
            console.log(sheetArray);
            for(let item in sheetArray){
              let rowTable = {};
              //这里的rowTable的属性名注意要与上面表格的prop一致
              //sheetArray的属性名与上传的表格的列名一致
              rowTable.name = sheetArray[item].姓名;
              rowTable.age = sheetArray[item].年龄;
              this.listTable.push(rowTable)
            }
          }
        } catch (e) {
          this.$message.warning('文件类型不正确！');
        }
      };
      fileReader.readAsBinaryString(_file);
    },

	//上传1个以上文件时弹窗提示错误
    exceed: function() {
      this.$message.error("最多只能上传1个xls文件");
    },
    //删除文件
    remove() {
      this.listTable = [];
    }

效果如图：