1. 程式人生 > 其它 >前端實現匯入Excel 資料回顯

前端實現匯入Excel 資料回顯

首先需要下載 xlsx 外掛

然後在需要的頁面引入

importXLSXfrom'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);
      },