安装依赖


npm install xlsx file-saver -S
npm install script-loader -S -D

创建JS文件

  • 在项目src目录下创建一个文件夹命名为vendor

  • 在vendor下新建一个js文件命名为 Export2Excel.js

注意：新建的文件夹名称并非一定为vendor,且并非一定在src文件下,可以是子目录也可以是你自己能找到的目录

实现代码

点击导出按钮

<el-button type="primary" icon="el-icon-share" @click.stop="handleDownload">导出Excel</el-button>


实现方法（methods）

tHeader：表示你导出Excel表格中的表头字段
filterVal：你的el-table对应的prop对应值
formatJson：方法中this.listData是你表格绑定的数据

formatJson(filterVal) {
    return this.listData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
            return parseTime(v[j])
        } else {
            return v[j]
        }
    }))
},
//导出Excel import('@/vendor/Export2Excel')懒加载形式引入
handleDownload() {
    import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['姓名', '性别', '年龄', '用户ID', '状态', '邮箱', '地址', 'IP地址', '上次登陆时间']
        const filterVal = ['name', 'sex', 'age', 'userid', 'status', 'email', 'address', 'ip', 'datetime']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
            header: tHeader,//表头 必填
            data,//导出的具体数据 必填
            filename: '用户信息', //导出文件名称 非必填
            autoWidth: true, //单元格是否要自适应宽度 非必填
            bookType: 'xlsx' //导出文件类型 非必填
        })
    })
},

参数说明 （export_json_to_excel）

参数 说明 类型 可选值 默认值
header 导出的Excel表头 Array / []
data 导出的具体数据 Array / []
filename 导出文件名称 String / excel-list
autoWidth 单元格是否要自适应宽度 Boolean true / false true
bookType 导出文件类型 String xlsx,csv,txt,more xlsx

文件下载