在許多的後臺系統中少不了匯出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"},     
          ]
       }
   }
}