landline

Vue插件之导出EXCEl

本周项⽬需要实现导出列表数据的功能，在github上找到了⼀个⽐较好⽤的插件~

简单的整理⼀下，希望对各位有所帮助。

使⽤⽅法：

安装依赖

npminstallvue-json-excel

2.项⽬主⽂件⼊⼝全局引⼊

importJsonExcelfrom'vue-json-excel'

ent('downloadExcel',JsonExcel)

3.直接在项⽬中使⽤

导出数据

4.组件属性说明

属性名类型描述

dataArray需要导出的数据，⽀持中⽂

fieldsObject定义需要导出的数据字段

namestring导出EXCEL的⽂件名

typestring导出EXCLE的⽂件类型，两种格式xls,csv,默认是xls

fetchfunction回调函数。在下载前通过接⼝获取数据。只有在没有data属性的情况下该属性才会⽣效

下⾯来举⼏个栗⼦

class="btnbtn-default"

:data="json_data"

:fields="json_fields"

name="">

DownloadExcel(可以⾃定义⾃⼰想要的html)

constapp=newVue({

el:'#app',

data:{

//列出⾃⼰需要导出的字段

json_fields:{

//⽣成excel的字段：导出数据的字段

'Completename':'name',

'City':'city',

'Telephone':'',

'Telephone2':{

field:'ne',

callback:(value)=>{

return`LandlinePhone-${value}`;

}

},

},

//导出的数据

json_data:[

{

'name':'TonyPeña',

'city':'NewYork',

'country':'UnitedStates',

'birthdate':'1978-03-15',

'phone':{

'mobile':'1-541-754-3010',

'landline':'(541)754-3010'

}

},

{

'name':'Thessaloniki',

'city':'Athens',

'country':'Greece',

'birthdate':'1987-11-23',

'phone':{

'mobile':'+',

'landline':'(2741)2621-244'

}

}

]

}

})

json_fields的回调函数有3种写法

写法⼀：

json_fields:{

'Completename':'name',

'City':'city',

'Telephone':'',

'Telephone2':{

//带field：从该条数据中选择⼀个字段最深处的数据

field:'ne',

//value就是这个字段值代表最深处的数据

callback:(value)=>{

return`LandlinePhone-${value}`;

}

},

},

写法⼆：

json_fields:{

'Completename':'name',

'City':'city',

'Telephone':'',

'Telephone2':{

//带field：从该条数据中选择⼀个字段

field:'phone',

//value就是这个字段值

callback:(value)=>{

return`LandlinePhone-${ne}`;

}

},

},

写法三：

json_fields:{

'Completename':'name',

'City':'city',

'Telephone':'',

'Telephone2':{

//没有field:value代表整条数据

callback:(value)=>{

return`LandlinePhone-${ne}`;

}

},

},