1.安装插件
cnpm install vue-json-excel
2.在main.js中引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3.在vue页面中使用
<download-excel :data="json_data" :fields="json_fields" name="UserInfo">
<button>点击导出</button>
</download-excel>
data() {
return {
json_fields: {
User_Name: "name", //常规字段
City: "info.city", //支持嵌套属性
phone: {
field: "phone.landline",
callback: value => {
//自定义回调函数
return `Landline Phone - ${value}`; //拼接返回值
}
},
remark: {
field: "info.remark",
callback: value => {
return `Reamrk: ${value}`;
}
}
},
//测试数据
json_data: [
{
name: "张三",
info: {
city: "New York",
country: "EN",
remark: "测试1"
},
phone: {
mobile: "1",
landline: "11"
}
},
{
name: "李四",
info: {
city: "BeiJing",
country: "CN",
remark: "测试2"
},
phone: {
mobile: "2",
landline: "22"
}
},
{
name: "王二",
info: {
city: "Nanjing",
country: "CN",
remark: "测试3"
},
phone: {
mobile: "3",
landline: "33"
}
}
],
//数据格式
json_meta: [
[
{
" key ": " charset ",
" value ": " utf- 8 "
}
]
],
};
},
数据说明:
- json_data: 需要导出的数据
- json_fields:
自主选择要导出的字段,指定嵌套数据并将标签分配给键是标签的字段,值是JSON字段。这将“按原样”导出字段数据。如果需要自定义导出的数据,可以定义回调函数。里面的属性是excel表每一列的title,注意多个词组组成的属性名要加双引号
如果需要自定义导出的数据,可以定义回调函数。