一、安裝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_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"
        }
      ],
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]

五、用到的屬性解釋(詳細屬性請檢視文件)

1. json_data：需要匯出的資料

2. json_fields：裡面的屬性是excel表每一列的title,用多個片語組成的屬性名(中間有空格的)要加雙引號;

指定介面的json內某些資料下載,若不指定，預設匯出全部資料中心全部欄位

六、匯出的excel