前端将json数据导出为Excel表格VUE

在最近的项目中有需求用表格数据导出excel的，然后看了很多资料，返现用vue-json-excel配置及使用都非常简单、好用，先记下来，哈哈哈哈。

一、安装vue-json-excel
你要是装了淘宝镜象，cnpm也可以

npm install vue-json-excel

二、在main.js中注册使用

import JsonExcel from 'vue-json-excel'
// ‘downloadExcel’ 为 组册组件名字 
Vue.component('downloadExcel', JsonExcel)

三、在你需要的界面使用组件
如果你是多个界面都要用的话，建议写成组件，会省很多事，毕竟每个导出之前你得先获取数据，配置要导出的JSON对象中的字段吧，

// 组件使用
 <download-excel
      :data = "json_data"
      name = "报表.xls">
     <el-button type="primary" size="small">导出</el-button>
</download-excel>

组件绑定数据不为空时，组件点击就会下载， 组件样式可以自己定义。
四、配置信息

属性名	类型	描述
data	Array	需要导出的数据，支持中文
fields	Object	定义需要导出数据的字段
name	Object	导出excel的文件名
type	String	导出excel的文件类型（xls,csv）,默认是xls
header	string/Array	数据的标题。可以是字符串（一个标题）或字符串数组（多个标题）。

更多参数和详情>>
五、下载数据及表格格式化

this.json_data =[{
					name: "张三",
					mobile: "13400000000",
					time："2020-12-02T19:02:01.707",
					contact：""
				}]
// 对数据的格式化
 this.json_fields = {
          "姓名": "name",
          "电话": "mobile",
          "时间":{
            field: "time",
            // time也可以是对象。然后获取其中属性
            callback: value => {
              return value === '' ? '': value.split("T")[0];
            }
          }，
          "联系人及方式":{
            // 如果字段未定义，则获取整行。
            callback: value => {
              return value.name + value.phone;
            }
          }， ,
        };

好了，结束。
主要用于提醒自己，以后方便回顾。