vue-json-excel官方文档
 
使用方法
 
1. 在项目中安装vue-json-excel
 
npm install vue-json-excel -S
 
2. 在main.js中，将vue-json-excel在全局注册
 
import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);
 
 
3. API参数解读
 
参数名
参数类型
描述
默认值
data
数组
需要导出的参数
fields
对象
规定导出数据中的字段名称与文件每一列列头名称的关系。
要导出的JSON对象中的字段。如果没有提供，JSON中的所有属性将被导出。
export-fields (exportFields)
对象
解决与其他组件的命名冲突问题。
用于解决其他使用变量字段的组件(如vee-validate)的问题。exportFields的工作原理与字段完全相同
type
字符串
文件类型。xls或者csv
xls
name
字符串
导出文件名称。
data.xls
default-value (defaultValue)
字符串
如果某一行没有字段值时候起作用。
当行没有字段值时用作回退。
header
字符串/数组 
导出文件表格标题。
数据的标题。可以是字符串(一个标题)或字符串数组(多个标题)。
title(deprecated)
字符串/数组 
与header一样，为了向后兼容，我们也保留了title，但不建议使用它，因为它会与HTML5的title属性冲突。
footer
字符串/数组 
导出文件数据页脚。
可以是字符串(一个页脚)或字符串数组(多个页脚)。
’ ’
worksheet
方法
工作表选项卡的名称。
‘Sheet1’
fetch
方法
在点击下载按钮后，开始下载之前执行的函数。
回调以获取数据下载之前，如果它被设置设置了，它将在点击鼠标之后立即执行(这个过程是在开始下载之前的)。重要提示:只有在没有定义数据道具的情况下才有效。
before-generate
方法
在生成/获取数据之前调用方法，例如:显示加载进度
before-finish
方法
在下载框弹出之前调用方法的回调，例如:隐藏加载进度
stringifyLongNum
布尔类型
长数字和十进制(解决数字精度丢失的问题)，默认:false
escapeCsv
布尔类型
这将转义CSV值，以修复一些excel数字字段的问题。但这会用=" and "包装所有csv数据，以避免你不得不将这个道具设为假。默认值:真正的

4. 关键代码
 
1. template标签中
 
<download-excel
    :fields="exportDataStandard"
    :data="exportData"
    type="xls"
    :name="exportName"
    :header="exportHeader"
    :footer="exportFooter"
    :defaultValue="exportDefaultValue"
    :fetch="createExportData"
    :before-generate="startDownload"
    :before-finish="finishDownload"
    worksheet="导出信息"
>
  <el-button icon="el-icon-download">导出</el-button>
</download-excel>
 
2. script标签中
 
export default {
  name: "BMSStationInfo",
  components: {
    BMSStationInfoDetailInformation
  },
  data() {
    return {
      exportDataStandard: {
        "名称": "name",
        "性别": "sex",
        "地区": {
          field: "phone",
          callback: value => {
            return `他的电话是：${value}`
          }
        }
      },
      exportData: [
        {name: "甲", sex: "女", phone: 15521103211},
        {name: "乙", sex: "男", phone: 15521103222},
        {name: "丙", sex: "女", phone: 15521103233},
        {area: "北京市朝阳区"},
        {name: "丁", sex: "男", phone: 15521103233},
        {name: "丁", sex: "男", phone: 15521103233},
      ],
      exportName: "导出数据",
      exportHeader: ["用户信息页头1","用户信息页头2"],
      exportFooter: ["用户的信息页脚1","用户的信息页脚2"],
      exportDefaultValue: "这一行这一列没有数据"
    }
  },
  methods: {
    createExportData() {
      // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
      // TODO:构造需要下载的数据返回
      return [
        {name: "甲", sex: "女", phone: 15521103211},
        {name: "乙", sex: "男", phone: 15521103222},
        {name: "丙", sex: "女", phone: 15521103233},
        {area: "北京市朝阳区"},
        {name: "丁", sex: "男", phone: 15521103233},
        {name: "丁", sex: "男", phone: 15521103233},
      ];
    },
    startDownload() {
      console.log("数据开始")
    },
    finishDownload() {
      console.log("数据下载完成")
    }
  }
}
 
5. 重点参数具体使用
 
 
fields：规定导出数据中的字段名称与文件每一列列头名称的关系。可以使用callback回调函数的形式，对字段进行格式化。如果fields没有规定默认格式的话，会把所有的数据都导出。
 举例：
 
 
 
data：需要导出的数据参数，数组中存储对象，每一个对象就是导出的一行数据，data中的键对应fields中的值。
 
 
 
default-value：如果某一行中，没有fields中规定的默认数据的话，会导出默认值的值。如图中导出数据中的第三行，没有name、sex和phone，而设置的默认值为：“这一行这一列没有数据”，则导出的样式为：
 
 
 
 
header、footer：规定导出信息页头页脚。
 ① 如果是一个字符串，则导出形式如下：
 
 
 ② 如果是一个字符串数组，则导出形式如下：
 
 
worksheet：规定excel表格下方选项卡名称
 
 
fetch、before-generate 、before-finish 这三个接收三个方法。
 ① fetch：点击下载按钮后立即执行，会在开始下载数据前执行。返回值为下载的数据。这里可以将函数定义为async函数，并在里面await暂停等待，请求数据，构造下载所需要的的数据。
 
 ② before-generate、before-finish这两个分别作用于开始下载之前和开始下载之后，可以用来控制显示下载进度条。

 

 

  
 
 
今天一个朋友问题vue的数据驱动是什么？所以我给大家说说我理解的vue的数据驱动。1、首先从字面意思理解下：数据驱动? 什么是数据驱动？ 我理解就是通过控制数据的变化来改变某物或某事。2、Vue的数据驱动中， 数据驱动什么？ 就是说物或者事是什么？ 这里的vue数据驱动的是视图也就是DOM元素让DOM的内容随着数据的改变而改变， 这里视图（DOM）可以理解成上面的改变的某物或者某事
当我们知道vue数据驱动的字面意思的时候我们是不是在想vue是怎么实现数据驱动的呢？
首先我们看下下面的图片（我自己画的）
 

 

  
 
 
a
 
我不知道大家能不能看懂上面图片，说的通俗一点就有一个人（数据驱动）在监视一个叫（数据）的家伙，一旦这个家伙有任何举动他讲会告诉他的领导（视图DOM）,然后领导就会做出一些相应的变化；回到话题就是这个人(数据驱动)怎么监视的呢？ 又是怎么把这些情况反映给领导（视图DOM）的呢？首先我们定义一个数据：
 

  
data(){
     return {
        data1:new Object(),
        data2:new Array()
     }
}
//view 视图
<div>{{data1}}</div>
<div>{{data2}}</div>

 
 
我定义了一个对象和一个数组数据并且绑定到视图，然后我们改变一下data1和data2：
 

  
this.data1 = {
    a:2,
    b:3
}
this.data2 = [
    {
        name:'test',
        age:10
    },
    {
        name:'test1',
        age:11
    }
]

 
 
在vue中当改变数据的时候， 视图中的数据也会相应改变。那到底中间做了什么呢？第一怎么监听数据变化?注意：vue的数组类型只允许下面方法操作数组才会触发视图更新：
 

  
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

 
 
数据监听变化：先看vue的文档怎么说的：Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
 

 

  
 
 
2.png
 

vue说递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。这就是话不就是告诉我们他监听了data里面所有的数据吗？ 然后转换为getter/setter？ 这个时候是不是知道vue是怎么监听data数据啦？ 没有错vue监听data是通过defineProperty方法来监听的。
大家看一下下面的defineProperty如果做到监听对象变化的：
 

  
let data = {
    "a":null
};
Object.defineProperty(data,"a",{
    get:()=>{
        console.log('获取数据啦');
    },
    set:()=>{
        console.log('数据发生变化啦');
    }
})
//先回车在执行下面代码看变化
data.a;
//然后执行下面代码看变化
data.a = {b:1}

 
 
（大家可以复制到Google控制台进行测试下）
 

 

  
 
 
效果图.png
 
现在大家就应该知道vue数据监听怎么做了吧。（小提示：以后大家面试中如果被问题vue为什么不支持 IE8 及以下版本,你就可以说因为vue用了defineProperty方法来监听数据。 因为defineProperty只支持IE9及以上版本浏览器）
 

 

  
 
 
defineProperty兼容性.png
 

知道怎么监听数据啦， 就知道这个人是用什么方式来监视这个家伙啦（data数据）；然后就是怎么去告诉领导这个家伙（data数据）的变化啦；
（遗留问题：怎么去实现当真的数据变化去变化视图呢？ 大家是不是说可以操作dom啊，vue就不是直接操作DOM,这又是Vue一个神奇的地方那就是Virtual DOM（虚拟DOM树）。大家可以讨论这个问题。谢谢大家）
 
：：：皮一下
 

  
//直接操作dom
let data = {
    "a":null
};
Object.defineProperty(data,"a",{
    get:()=>{
        console.log('获取数据啦');
    },
    set:(value)=>{
        document.querySelector('#app').innerHTML = JSON.stringify(value);
    }
})

 
 
_ | _ | _ | _ | _ | _知识个人总结，有不对的地方希望大家提出来，大家共同进步。

参考：VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出
 使用vue-json-excel生成并导出excel
 
一、安装vue-json-excel
 
npm install vue-json-excel -S
 
二、main.js中引入
 
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
 
三、简单使用固定数据
 
代码
 
 
<download-excel
     class = "export-excel-wrapper"
     :data = "json_data"
     :fields = "json_fields"
      header="这是个excel的头部"
      name = "导出的表格名称.xls">
      <el-button type="primary" size="small">导出EXCEL</el-button>
</download-excel>
 
数据 (例子中,json_data写死的)
 
 
json_data：需要导出的数据
 
 
json_fields：里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定，默认导出全部数据中心全部字段
 
 
     json_fields: {
        姓名: "name",   
        城市: "city",
        国家: "country",
        生日:"birthdate",
        "电话 测试": "phone"    //如果命名的标题有空格,需要用双引号
      },
      json_data: [
        {
          name: "张三",
          city: "北京",
          country: "中国",
          birthdate: "1998-03-15",
          phone:"15645689652"
        },
        {
          name: "李四",
          city: "上海",
          country: "中国",
          birthdate: "1988-03-15",
          phone:"15645689652"
        }
      ]
 
点击按钮导出EXCEL
 
 
四、使用回调获取数据及详细参数
 
属性名
类型
描述
默认值
data
数组
要输出的数据
fields
Object
声明要导出的JSON对象中的字段。就像是在制作表头 默认将导出JSON中的所有属性。
export-fields
Object
用于解决其他组件使用可变fields的问题,exportFields的工作原理与fields完全相同
type
字符串
表格类型
[xls, csv]
name 字符串
文件名
data.xls
header
标题
表格的标题
footer
字符串
页脚
default-value
字符串
用于填充空置单元格
‘’
worksheet
字符串
表单名称
‘Sheet1’
fetch
函数
进行回调，以便在下载之前获取数据（如果已设置），则在按下鼠标后以及下载过程之前会立即运行。重要信息：仅在未定义数据属性的情况下有效，即不使用data参数
before-generate
函数
回调以在生成/获取数据之前立即调用方法，例如：显示加载进度
before-finish
函数
在下载框弹出之前进行回调以调用方法，例如：隐藏加载进度
stringifyLongNum
布尔
字符串化长整数和十进制（解决数字精度丢失的问题），默认值：false
escapeCsv
布尔
可以转义CSV值，以解决数字字段中的一些问题。

按需获取数据
 
<template>
  <div id="app">
 
    <hr>
    <h2>Fetch Example</h2>
    <downloadexcel
      class            = "btn"
      :fetch           = "fetchData"
      :fields          = "json_fields"
      :before-generate = "startDownload"
      :before-finish   = "finishDownload">
      Download Excel
    </downloadexcel>
  </div>
</template>
 
<script>
import downloadexcel from "vue-json-excel";
import axios from 'axios';
 
export default {
  name: "App",
  components: {
    downloadexcel,
  },
  data(){
    return {
      json_fields: {
        'Complete name': 'name',
        'Date': 'date',
      },
    }
  }, //data
  methods:{
    async fetchData(){
      const response = await axios.get('https://holidayapi.com/v1/holidays?key=a4b2083b-1577-4acd-9408-6e529996b129&country=US&year=2017&month=09');
      console.log(response);
      return response.data.holidays;
    },
    startDownload(){
        alert('show loading');
    },
    finishDownload(){
        alert('hide loading');
    }
  }
};
</script>

大多数情况下后端会将数据返回给我们想要的json格式，但是有些情况下可能刚开始数据没有排序，但是突然的甲方说这块数据要从大到小排序，后端改的话比较麻烦，这时候前端直接处理就快很多了，话不多说，上代码。
 
data(){
        return{
            leftContent：[]													//要绑定的数据，这里是数组套对象格式
        }
},
mounted() {
		this.gettyedata()
},
methods:{
        gettyedata(){
            request({														//这里使用封装好的axios请求方法
				url:'请求地址',
				method:'请求方式',
				params:{参数名:参数值}
			}).then(res=>{
				if(res.status===200){
					res.data=res.data.sort(function (a,b){		//重点在这里，下面有说明
							return b.inNum-a.inNum;				//inNum是要根据某个字段进行排序的字段名，
					})
					this.leftContent=res.data
				}else{
					'请求失败处理'
					}
			})
        }
}
 
方便查找就这直接在这里写了：
 
res.data=res.data.sort(function (a,b){						//重点在这里，下面有说明
							return b.inNUm-a.inNum;			//inNum是要根据某个字段进行排序的字段名，
					})
 
其实对数据进行排序仅仅是用了js的sort()方法，如果比较着急可以直接复制代码替换相应的字段进行使用，如果想研究其原理可以看看官方的定义。
 
 如果看不明白可以移步到w3school进行深入研究。