前端實現導入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);
      },