vue+element实现excel中的信息批量导入和导入模板的下载
2020/3/19 11:02:15
本文主要是介绍vue+element实现excel中的信息批量导入和导入模板的下载,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在页面中,凡是有表格的信息,那一定会涉及到表格的批量导入。把一个excel表中的信息导入到页面中,下面有两种方法实现这个功能。
- 第一种是需要后台提供的接口,把参数传给后台,后台返给表中的数据。
- 第二种是纯前端实现表格的批量导入。
感觉有用就点个赞吧,给我一波小动力~~~
通过后台的接口实现批量导入
1、element实现一个数据导入的按钮
<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(); }, 复制代码
2、 设置上传的参数、地址和请求头
data(){ importData: { //参数 type : '接口的参数' }, uploadUrl:'', //地址 token :{ //请求头 Authorization:null, }, } mounted(){ this.uploadUrl ='路径'; this.token.Authorization = Cookies.get('token'); //从cookie里获取token } 复制代码
纯前端实现批量导入
1、安装XLSX及引用
npm i XLSX -S
import XLSX from 'xlsx'
2、添加表格
<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: [] } }, 复制代码
3、添加按钮
<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> 复制代码
4、写方法
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; }, 复制代码
这篇关于vue+element实现excel中的信息批量导入和导入模板的下载的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南