vue的vue-json-excel导出excel表格数据

之前使用过file-saver等插件导出过表格，最近发现使用vue-json-excel插件比较简单。

包链接：vue-json-excel - npm   可查看导出插件的各种属性

一.安装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"   //表头
   title="登记表"      //标题
   name = "登记表.xls">
  <el-button type="primary" size="small">导出EXCEL</el-button>
  </download-excel>
  
  data(){
  return{
     json_data:[
       {
         Name:"张三",
         China:"90",
         Math:"93",
         English:"88"
       },
       {
         Name:"李四",
         China:"94",
         Math:"92",
         English:"86"
       }
     ],
     json_fields:{
        "姓名":"Name",
        "语文":"China",
        "数学":"Math",
        "英语":"English",
     }
  }
  }