前端实现导入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); },