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

在许多的后台系统中少不了导出Excel表格的功能，下面就是我在实际的项目中纯前端使用vue-json-excel插件来实现简单Excel表格的导出功能；如有描述不当，欢迎指正，补充。2020-10-22 17:32:14

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   = "json_data"
    :fields = "json_fields"
    name = "用户统计列表">
   导出Excel
</download-excel>

3.1、模板中标签属性的说明

　　name=“用户统计列表” --------------导出Excel文件的文件名
　　:fields = “json_fields” ----------------Excel中表头的名称
　　:data = “json_data” -------------------导出的数据

4、Excel表格表头的设置

export default{
   data(){
       return{
          json_fields: {  //导出Excel表格的表头设置
            '序号': 'type',
            '姓名': 'userName',
            '年龄': 'age',
            '手机号': 'phone',
            '注册时间': 'createTime',
          },
       }
    }
 }

5、Excel表格中的数据

export default{
   data(){
       return{
          json_data:[
            {"userName":"张三","age":18,"gender":"phone":15612345612,"createTime":"2019-10-22"},
            {"userName":"李四","age":17,"gender":"phone":15612345613,"createTime":"2019-10-23"},
            {"userName":"王五","age":19,"gender":"phone":15612345615,"createTime":"2019-10-25"},
            {"userName":"赵六","age":18,"gender":"phone":15612345618,"createTime":"2019-10-15"},     
          ]
       }
   }
}