vue中纯前端实现导出简单Excel表格的功能

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:""},
......],

 实现效果：