前端上传excel表格文件解析预览

效果图

implUserExcel(file) {
      const that = this
      this.loadingExcel = true
      const isXls = file.type === 'xls/xlsx'
      const isLt2M = file.size / 1024 / 1024
      if (file.name.indexOf('xls') === -1) {
        this.loading = false
        this.$refs.upload.clearFiles()
        this.$message.error('导入文件格式只能是 xls/xlsx 格式的Excel文件!')
        return
      } else {
        if (isLt2M > 1) {
          this.loadingExcel = false
          this.$refs.upload.clearFiles()
          this.$message.error('导入文件大小不能超过 1MB!')
          return
        } else {
          const loading = this.$loading({
            lock: true,//同v-loading的修饰符
            text: '解析文件中',//加载文案
            backgroundColor: 'rgba(55,55,55,0.4)',//背景色
            spinner: 'el-icon-loading',//加载图标
            target: document.querySelector(".el-dialog__body")//loading需要覆盖的DOM节点，默认为body
          })
          this.fileData = file
          this.excelDataArr = []
          // 拿到所导入文件的名字
          const fileName = file.raw
          // 定义reader，存放文件读取方法
          const reader = new FileReader()
          //定时器解析文件防止加载动画不生效
          setTimeout(()=>{
            // 启动函数
            reader.readAsBinaryString(fileName)
            reader.onloadstart = (e)=>{
              this.upload.isUploading = true
            }
            // onload在文件被读取时自动触发
            reader.onload = function(e) {
              loading.close()
              // console.log('dkdk',e.target.result)
              const uploadData = []
              // workbook存放excel的所有基本信息
              const workbook = XLSX.read(e.target.result, { type: 'binary' })
              // console.log('dkkd',XLSX)
              // var sheets = workbook.Sheets;
              // uploadData = that.transformSheets(sheets);

              // Here is your object获取空单元格
              var XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { defval: null })
              // console.log('ksksk', XL_row_object.length)
              if (XL_row_object.length > 0) {
                // console.log('dkkd',XL_row_object)
                that.excelDataArr = XL_row_object
                that.handleExcelData(XL_row_object.slice(0,1000))
                that.excelCurrent = 1
                that.excelTotol = XL_row_object.length
              }
            }
          },10)
        }
        this.loadingExcel = false
      }
      this.loadingExcel = false
    },
    // 遍历回显上传表格
    handleExcelData(XL_row_object){
      // console.log('ccc',num,circleNum,timer)
      this.excelData = []
        for (var i = 0; i < XL_row_object.length; i++) {
          var obj = {
            materielCode: '',
            materielName: '',
            model: '',
            materielTypeName: '',
            warehouseName: '',
            warehouseCode: '',
            storageName: '',
            stationCode: '',
            remark: '',
            unit: ''
          }
          obj.materielCode = Object.values(XL_row_object[i])[0]
          obj.materielName = Object.values(XL_row_object[i])[1]
          obj.materielTypeName = Object.values(XL_row_object[i])[2]
          obj.model = Object.values(XL_row_object[i])[3]
          obj.warehouseName = Object.values(XL_row_object[i])[4]
          obj.warehouseCode = Object.values(XL_row_object[i])[5]
          obj.stationCode = Object.values(XL_row_object[i])[6]
          obj.storageName = Object.values(XL_row_object[i])[7]
          obj.remark = Object.values(XL_row_object[i])[8]
          obj.unit = Object.values(XL_row_object[i])[9]
          this.excelData.push(obj)
          // console.log('ooo',i==XL_row_object.length-1)
        }
      // },5000)
    },

数据量较大时可做分页展示