Vue中纯前端导出简单Excel表格的方法(使用vue-json-excel插件)
使用方法:
1.安装依赖
npm install vue-json-excel
2.main.js引入
import Vue from 'vue'
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3.在模板中使用
<download-excel :data="guijidianList" :fields="json_fields" worksheet="My Worksheet" name="轨迹点明细">导出明细列表</download-excel>
3.1模板中标签属性的说明
name=“轨迹点明细” --------------导出Excel文件的文件名
:fields = “json_fields” ----------------Excel中表头的名称
:data = “guijidianList” -------------------导出的数据
4.数据定义
json_fields: { //导出Excel表格的表头设置
'车牌号':'cheliangmingcheng',
'车辆ID':'cheliangid',
'设备编码':'sbbianma',
'流量卡号':'liuliangkahao',
'所属客户':'suoshukehu',
'实时速度':'shishisudu',
'经度':'jingdu',
'纬度':'weidu',
'设备IMIS':'shebeiIMIS',
'服务器时间':'fuwuqishijian',
'设备时间':'shebeishijian',
'状态':'zhuangtai',
'开始时间':'kaishishijian',
'结束时间':'jieshushijian',
},
guijidianList: [{
cheliangmingcheng: "甘A34567",
shishisudu: "10km/h",
fuwuqishijian: "2021-08-05 09:10",
shebeishijian: "2021-08-05 09:10",
shebeibianma: "bfdddd",
liuliangkahao: "1245682248",
suoshukehu: "三级单位1-1-1",
jingdu: "116.478912",
weidu: "39.998549",
shebeiIMIS: "wewwwwwww",
zhuangta:""},
......],
实现效果: