Java之导入Excel Vue框架前端篇

html内容：

<!--选择上传的Excel文件-->
<input type="file" id="excel"ref="head" accept=".xls,.xlsx" @change="checkType()" multiple/>
<!--点击上传Excel文件-->
<button type="button" @click = "uploadExcel">导入Excel</button>

js：

上传部分：

　　　　　//检查选中的文件是否是Excel文件
        checkType() {
          let vm = this;
          let allImgExt = '.xls|.xlsx|';
          let filePath = this.$refs.head.value;
          let extName = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
          if (allImgExt.indexOf(extName + '|') === -1) {
            alert("请选择正确的Excel文件");
            this.$refs.head.value = '';
            excelContent = [];
            return;
          }
          let file = this.$refs.head.files[0];
          vm.readExcel(file);//预览选中的Excel文件信息
          vm.excelContent = [];
        }



        //导入Excel文件
        uploadExcel() {
          let vm = this ;
          let formData = new FormData();
          let file = this.$refs.head.files[0];
          if(file == ""  || file == undefined){
            alert("请选择要导入的Excel文件");
            return;
          }
          formData.append('file', file);
          console.log("userCode = ", this.token.userInfo.userCode)
          //调用函数，把formData当做参数上传给后台的attchment微服务中的表格中
          this.ctApi.post({
            url: uploadExcel,
            data: formData,
            success: (data) => {
              
            }
          })
        }

预览部分：把Excel文件的信息保存到excelContent 数组中，每一个元素就是一行excel数据

        //预览要导入的excel
        readExcel(file) {// 解析Excel
          let _this = this;
          return new Promise(function(resolve, reject){// 返回Promise对象
            const reader = new FileReader();
            reader.onload = (e) => {// 异步执行
              try {
                // 以二进制流方式读取得到整份excel表格对象
                let data = e.target.result,workbook = XLSX.read(data, {type: 'binary'});
                let batteryArr = [];

                var sheetNames = workbook.SheetNames // 工作表名称集合
                _this.workbook = workbook
                _this.getTable(sheetNames[0])
              } catch (e) {
                reject(e.message);
              }
            };
            reader.readAsBinaryString(file);
          });
        }
        //根据excel的表明，获取单元格内容
        getTable (sheetName) {
          let vm =this;
          var worksheet = this.workbook.Sheets[sheetName]//获取整张excel表的内容
          vm.excelContent = XLSX.utils.sheet_to_json(worksheet)//把获取的信息转换成接送字符串
        }    

转载于:https://www.cnblogs.com/liunianchengshuang/p/10832972.html