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;i
Export2Excel.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.
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表格功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！