Vue+iview实现自定义格式导出Excel文件

背景:项目中要实现一个导出Excel文件模板的功能,原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iview自带的方法只能导入CSV格式的文件,然后我是需要导出xlsx格式的文件,研究了一下,通过简单修改iview源码,可以实现自定义格式的文件,比如Excel,txt等,下面走起

1.先添加导出按钮

<Button
    type="primary"
    @click="exportData" 
>导出模板</Button>


  

 

  
1
  
2
  
3
  
4
  
5
 

2.绑定表格模板

<Table
    :columns="modelColumns"        
	:data="modelData"
    ref="modelTable" 
    v-show="false"
></Table>
// v-show隐藏表格,这个表格只是用来作为一个导出的模板而存在
// 不能用v-if,会把表格代码去除



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

3.绑定数据和方法

<script>
	export default{
		data(){
			return{
				modelData:[],
				modelColumns:[
					{title:'手机号'}// 列名根据需要添加
				]
			}
		},
		methods:{
			exportData(){
				this.$refs.modelTable.exportCsv({
					filename:'模板名字',
					columns:this.modelColumns,
					data:this.modelData
				})
			}
		}
	}
</script>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

如果只要导出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;	
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

修改完之后保存,其它不变,调用方法时增加type属性

methods:{
	exportData(){
		this.$refs.modelTable.exportCsv({
			filename:'模板名字',
			type:'xlsx' // 也可以填写txt,xls
			columns:this.modelColumns,
			data:this.modelData
		})
	}
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/111596366