Vue2导出Excel表格 vue-json-excel插件使用

官方文档：https://www.npmjs.com/package/vue-json-excel 

 一、安装vue-json-excel插件

// npm安装
npm install vue-json-excel -S

二、main.js中引入插件

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入
import JsonExcel from 'vue-json-excel'

Vue.config.productionTip = false
// 引入
Vue.component('downloadExcel',JsonExcel)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

三、在代码中使用

<template>
  <div id="app">
    <download-excel 
      class="export-excel-wrapper" 
      :data="json_data" 
      :fields="json_fields" 
      type="xls" 
      title="班级学生表"
      name="班级学生表.xls">
      <button>导出Excel</button>
    </download-excel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 模拟的假数据
      json_data: [
        { name: "张三", age: 18, sex: "男" },
        { name: "李四", age: 20, sex: "男" }
      ],
      // 转化导出的字段名
      json_fields: {
        姓名: "name",
        年龄: "age",
        性别: "sex"
      }
    }
  }
}
</script>

名称	类型	描述
data	Array	要导出的数据
fields	Object	要导出的 JSON 对象内的字段
type	string	要导出的文件类型
title	string	要导出的表头
name	string	导出的文件名称

四、效果图

具体参数 请参考官方文档