1.npm安装依赖
npm install vue-json-excel
2.项目主文件入口main.js全局引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3.项目中使用
<download-excel :data="exportData" :fields="json_fields" name="filename.xls" >
<span>导出数据</span>
</download-excel>
4.组件属性说明
属性名 | 类型 | 类型 |
---|
data | Array | 需要导出的数据,支持中文 |
fields | Object | 定义需要导出的数据字段 |
name | string | 导出EXCEL的文件名 |
type | string | 导出EXCLE的文件类型,两种格式xls,csv,默认是xls |
fetch | function | 回调函数。在下载前通过接口获取数据。只有在没有data属性的情况下该属性才会生效 |
下面来举几个栗子
<download-excel
class = "btn btn-default"
:data = "json_data"
:fields = "json_fields"
name = "filename.xls">
Download Excel (可以自定义自己想要的html)
</download-excel>
const app = new Vue({
el: '#app',
data: {
json_fields: {
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
field: 'phone.landline',
callback: (value) => {
return `Landline Phone - ${value}`;
}
},
},
json_data: [
{
'name': 'Tony Peña',
'city': 'New York',
'country': 'United States',
'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': '+1 855 275 5071',
'landline': '(2741) 2621-244'
}
}
]
}
})
json_fields的回调函数有3种写法
1.写法一
json_fields: {
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
field: 'phone.landline',
callback: (value) => {
return `Landline Phone - ${value}`;
}
},
},
2.写法二
json_fields: {
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
field: 'phone',
callback: (value) => {
return `Landline Phone - ${value.landline}`;
}
},
},
3.写法三
json_fields: {
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
callback: (value) => {
return `Landline Phone - ${value.phone.landline}`;
}
},
},
https://www.cnblogs.com/yy136/p/10015561.html