VUE中使用vue-json-excel 將后台返回的json以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_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