vue导出Excel XLSX

Vue实现excel文件下载

话不多说，直接上代码

1、安装插件

npm install XLSX

2、main.js里面引入

import XLSX from 'xlsx'

3、导出

      <!--导出用户信息excel表格-->
      <download-excel
        class = "export-excel-wrapper"
        :data = "json_data"
        :fields = "json_fields"
        name = "用户信息列表.xls">
        <el-button type="primary" size="small" @click=" exportAllData(childrenTask)">导出</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、

 // 导出

        exportAllData(data) {

            var wb = XLSX.utils.book_new()

            let data1 = []

            data.map((v) => {

                var t = JSON.parse(v.data)

                t.map((vv) => {

                    vv.名称 = v.name

                    vv.账号 = v.auth

                    data1.push(vv)

                })

            })

            var ws = XLSX.utils.json_to_sheet(data1)

            XLSX.utils.book_append_sheet(wb, ws, '数据')

            XLSX.writeFile(wb, this.task.name + '（' + new Date() + '）.xlsx')

        },