背景:項目中要實現一個導出Excel文件模板的功能,原來實現是通過后臺生成然后前端請求下載,這樣要消耗IO資源,然后看了一下之前項目的導出功能,發現原來Vue+iview可以實現本地數據導出,不過iview自帶的方法只能導入CSV格式的文件,然后我是需要導出xlsx格式的文件,研究了一下,通過簡單修改iview源碼,可以實現自定義格式的文件,比如Excel,txt等,下面走起

1.先添加導出按鈕

<Buttontype="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,xlscolumns:this.modelColumns,data:this.modelData})} }

總結

以上是生活随笔為你收集整理的Vue+iview实现自定义格式导出Excel文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。