在页面中,凡是有表格的信息,那一定会涉及到表格的批量导入。把一个excel表中的信息导入到页面中,下面有两种方法实现这个功能。
感觉有用就点个赞吧,给我一波小动力~~~
<el-form-item style="float:right;"> <el-button size="small" icon="el-icon-download" @click="downLoadExlce">模板下载</el-button> <el-upload ref="upload" :action="uploadUrl" //上传的地址 :limit="1" //最大允许上传个数 :before-upload="beforeUpload" //上传文件之前的钩子,参数为上传的文件 :headers="token" //设置上传的请求头 :data = "importData" //上传时附带的额外参数 accept=".xls" //接受上传的文件类型 class="up-class" :on-success="uploadSuccess" //文件上传成功时的钩子 :show-file-list="false" //是否显示已上传文件列表 :auto-upload="true" //是否在选取文件后立即进行上传 > <el-button slot="trigger" size="small" type="primary" class="el-icon-plus el-icon-upload" >导入数据</el-button> </el-upload> </el-form-item> 复制代码
beforeUpload(file) { let extension =file.name.substring(file.name.lastIndexOf('.')+1); if(extension !== 'xls') { this.$message({ message: '上传文件只能是 xls格式!', type: 'warning' }); return false; } }, uploadSuccess (res ,file,fileList) { if (res.code == 200) { this.$message({ message: '导入成功!', type: 'info' }); }else { this.$alert(res.message, '导入失败', { confirmButtonText: '确定', }); } this.$refs.upload.clearFiles(); }, 复制代码
data(){ importData: { //参数 type : '接口的参数' }, uploadUrl:'', //地址 token :{ //请求头 Authorization:null, }, } mounted(){ this.uploadUrl ='路径'; this.token.Authorization = Cookies.get('token'); //从cookie里获取token } 复制代码
npm i XLSX -S
import XLSX from 'xlsx'
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> data () { return { tableData: [] } }, 复制代码
<el-upload class="upload" action="" //上传路径 :multiple="false" //是否支持多选文件 :show-file-list="false" //是否显示已上传文件列表 accept=".xls" //接受上传的文件类型 :http-request="httpRequest" //覆盖默认的上传行为,可以自定义上传的实现 > <el-button size="small" type="primary">批量导入</el-button> </el-upload> 复制代码
methods: { httpRequest (e) { let file = e.file // 文件信息 if (!file) { // 没有文件 return false } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) { // 格式根据自己需求定义 this.$message.error('上传格式不正确,请上传xls或者xlsx格式') return false } const fileReader = new FileReader() fileReader.onload = (ev) => { try { const data = ev.target.result const workbook = XLSX.read(data, { type: 'binary' // 以字符编码的方式解析 }) const exlname = workbook.SheetNames[0] // 取第一张表 const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) //生成json表格内容 // 将 JSON 数据挂到 data 里 this.tableData = exl // document.getElementsByName('file')[0].value = '' // 根据自己需求,可重置上传value为空,允许重复上传同一文件 } catch (e) { console.log('出错了::') return false } } fileReader.readAsBinaryString(file) } } </script> 复制代码
downLoadExlce () { let hrefStr = encodeURI('下载路径'); window.location.href = hrefStr; }, 复制代码