前端实现导入Excel 数据回显

首先需要下载  xlsx 插件

然后在需要的页面引入

import XLSX from 'xlsx'

1.定义一个文件上传项 <input type="file" id="excel-file">

放入button  按钮当中，通过change事件  监听文件选择

      // 导入
      getFiles(e){
        // 获取excel 文件参数（files）
        var files = e.target.files[0];
        var suffix = e.target.files[0].name.split(".")[1]
        // 判断文件类型是不是xlsx 格式
        if(suffix != 'xls' && suffix !='xlsx'){
          return this.$message.warning('文件类型不正确')
        }
        // 定义FileReader对象
        var reader = new FileReader()
        //  文件读取成功完成时触发
        reader.onload = (ev) => {
          // 文件里的文本会在这里被打印出来
          console.log('onload',ev)
            try {
              var data = ev.target.result
              var workbook=XLSX.read(data,{type:"binary"}) // 以二进制流方式读取得到整份excel表格对象
              var persons = []; // 存储获取到的数据
            } catch (e) {
                console.log(e)
                this.$message.warning('文件类型不正确');
                return;
            }
              // 表格的表格范围，可用于判断表头是否数量是否正确
              var fromTo = '';
              // 遍历每张表读取
              for (const sheet in workbook.Sheets) {
                  if (workbook.Sheets.hasOwnProperty(sheet)) {
                      fromTo = workbook.Sheets[sheet]['!ref'];
                      persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                      // break; // 如果只取第一张表，就取消注释这行
                  }
              }
              // 把获取的表格数据进行赋值
              this.reorderTable = persons.slice(0,-1)
              //  显示弹窗
              this.showfile = true
              // console.log('以二进制方式打开文件',this.showfile,this.reorderTable); 
        };
          // 以二进制方式打开文件
          reader.readAsBinaryString(files);
      },