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)//把獲取的信息轉換成接送字符串
        }