Vue实现excel文件下载

Vue实现excel文件下载

话不多说，直接上代码
1、安装插件

cnpm install vue-json-excel

2、main.js里面引入

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

3、导出按钮

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

4、data区写想要导出的字段以及导出的数据(数据写死测试，后续可调接口进行传值)

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

5、点击下载按钮
5、excel下载成功

*

兄弟萌，赶快试试吧