前端實現匯入Excel 資料回顯
阿新 • • 發佈:2021-06-13
首先需要下載 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); },