Vue实现导出excel表格功能
引言:
最近使用vue在做一个后台系统,技术栈vue+iView,在页面中生成表格后,iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求。
如果想要导出Excel
- 在src目录下创建一个文件(vendor)进入Blob.js和Export2Excel.js
- npminstall-Sfile-saver用来生成文件的web应用程序
- npminstall-Sxlsx电子表格格式的解析器
- npminstall-Dscript-loader将js挂在在全局下
表结构
渲染页面中的表结构是由columns列和tableData行,来渲染的columns为表头数据tableData为表实体内容
columns1:[ { title:'序号', key:'serNum' }, { title:'选择', key:'choose', align:'center', render:(h,params)=>{ if(params.row.status!=='1'&¶ms.row.status!=='2'){ returnh('div',[ h('checkbox',{ props:{ type:'selection' }, on:{ 'input':(val)=>{ console.log(val) } } }) ]) }else{ returnh('span',{ style:{ color:'#587dde', cursor:'pointer' }, on:{ click:()=>{ //this.$router.push({name:'',query:{id:params.row.id}}) } } },'查看订单') } } }, ... ],
tableData就不写了,具体数据结构查看iViewAPI
在build目录下webpack.base.conf.js配置我们要加载时的路径
alias:{ 'src':path.resolve(__dirname,'../src'), }
在当前页面中引入依赖
require('script-loader!file-saver') //转二进制用 require('script-loader!src/vendor/Blob') //xlsx核心 require('script-loader!xlsx/dist/xlsx.core.min')
当我们要导出表格执行@click事件调用handleDownload函数
handleDownload(){ this.downloadLoading=true require.ensure([],()=>{ const{export_json_to_excel}=require('src/vendor/Export2Excel') consttHeader=Util.cutValue(this.columns1,'title') constfilterVal=Util.cutValue(this.columns1,'key') constlist=this.tableData1 constdata=this.formatJson(filterVal,list) export_json_to_excel(tHeader,data,'列表excel') this.downloadLoading=false }) }, formatJson(filterVal,jsonData){ returnjsonData.map(v=>filterVal.map(j=>v[j])) }
Util.cutValue是公共方法,目的是为了将,tHeader和filterVal的值转成数组从而生成表格
###Utilmodule //截取value值 utils.cutValue=function(target,name){ letarr=[] for(leti=0;iExport2Excel.js/Blob.js的代码
下面再看下vue中excel表格的导入和导出
注意:vue中要实现表格的导入与导出,首先要install两个依赖,
npminstall-Sfile-saverxlsx 和 npminstall-Dscript-loader。其次,在项目src目录下新建一个文件夹vendor(名字随意),在此文件夹下放置两个文件Blob.js和Export2Excal.js(下载地址:http://files.cnblogs.com/files/wangyunhui/vendor.rar)。之后就可以愉快的导入导出了微笑。
1、导入
1.importfxx(obj){ let_this=this; console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxx1"); letinputDOM=this.$refs.inputer; //通过DOM取文件数据 this.file=event.currentTarget.files[0]; varrABS=false;//是否将文件读取为二进制字符串 varf=this.file; varreader=newFileReader(); //if(!FileReader.prototype.readAsBinaryString){ FileReader.prototype.readAsBinaryString=function(f){ varbinary=""; varrABS=false;//是否将文件读取为二进制字符串 varpt=this; varwb;//读取完成的数据 varoutdata; varreader=newFileReader(); reader.onload=function(e){ varbytes=newUint8Array(reader.result); varlength=bytes.byteLength; for(vari=0;i 2.导出
inportexcel:function(){//兼容ie10哦! require.ensure([],()=>{ const{export_json_to_excel}=require('../../vendor/Export2Excel');//引入文件 consttHeader=['用户名','姓名','部门','职位','邮箱','充值'];//将对应的属性名转换成中文 //consttHeader=[]; constfilterVal=['userName','realName','department','position','email','money'];//table表格中对应的属性名 constlist=this.sels; constdata=this.formatJson(filterVal,list); export_json_to_excel(tHeader,data,'列表excel'); }) }总结
以上所述是小编给大家介绍的Vue实现导出excel表格功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!