vue 实现表格导出

Vue实现excel文件导出

1.首先安装element ui

npm i element-ui -S

2.安装excel插件

cnpm install vue-json-excel

3.main.js里面引入：

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

4.导出按钮

      <download-excel
        class = "export-excel-wrapper"
        :data = "tableData"
        :fields = "json_fields"
        name = "用户信息列表.xls">
        <el-button type="primary" size="small">导出EXCEL</el-button>
      </download-excel>

5.在data中写入想要导出的字段及数据

  //导出excel

        json_fields: {
          "姓名": "name",    //常规字段
          "用户名":"username",
          "所属组织":"organization",
          "权限":"auth",
        },
        tableData: [
          //写死，后续可通过接口进行传值
          {
            name:'汤姆',
            username:'admin1',
            organization:'地球村',
            auth:'超级管理员'
          },
          {
            name:'杰米',
            username:'admin2',
            organization:'地球村',
            auth:'超级管理员'
          }
        ],
        json_meta: [
          [
            {
              " key ": " charset ",
              " value ": " utf- 8 "
            }
          ]
        ]

实测真实有效