背景:项目中要实现一个导出Excel文件模板的功能,原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iview自带的方法只能导入CSV格式的文件,然后我是需要导出xlsx格式的文件,研究了一下,通过简单修改iview源码,可以实现自定义格式的文件,比如Excel,txt等,下面走起
1.先添加导出按钮
<Button
type="primary"
@click="exportData"
>导出模板</Button>
2.绑定表格模板
<Table
:columns="modelColumns"
:data="modelData"
ref="modelTable"
v-show="false"
></Table>
// v-show隐藏表格,这个表格只是用来作为一个导出的模板而存在
// 不能用v-if,会把表格代码去除
3.绑定数据和方法
<script>
export default{
data(){
return{
modelData:[],
modelColumns:[
{
title:手机号}// 列名根据需要添加
]
}
},
methods:{
exportData(){
this.$refs.modelTable.exportCsv({
filename:模板名字,
columns:this.modelColumns,
data:this.modelData
})
}
}
}
</script>
如果只要导出CSV格式的文件,到这里就已经ok了,下面我们通过改源码实现自定义格式
写出上面代码后,按住Ctrl点exportCsv方法,先择iview.js文件进去,然后exportCsv的方法,复制在后面,自定义一个名字,修改下面的关键代码,然后和调用exportCsv一样,调用加一个type属性就ok了
if(params.filename){
if(params.filename.indexOf(.+params.type)===-1{
params.filename+=.+params.type;
}
}else{
params.filename=table.+params.type;
}
修改完之后保存,其它不变,调用方法时增加type属性
methods:{
exportData(){
this.$refs.modelTable.exportCsv({
filename:模板名字,
type:xlsx // 也可以填写txt,xls
columns:this.modelColumns,
data:this.modelData
})
}
}
搞定啦
