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

背景:项目中要实现一个导出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
        })
    }
}