vue+element 实现下载/导出 excel表格

vue+element 实现下载/导出 excel表格

首先疯狂的安装依赖

• npm install -S file-saver xlsx
• npm install -D script-loader
• npm install moment --save
  然后在src下面新建文件夹 excel，在excel文件夹下新建两个文件

在页面中引入 moment
import moment from "moment ";
引入下面的方法复制即可： outExe（）方法需要一个事件去触发这个方法；

methods:{
        outExe() {
            this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.excelData = this.tableData;//你要导出的数据list。
                this.export2Excel()
            }).catch(() => {

            });
        },
        export2Excel() {
            var that = this;
            require.ensure([], () => {
                const { export_json_to_excel } = require('../excel/Export2Excel'); //这里必须使用绝对路径
                const tHeader = ['date','address', 'name']; // 导出的表头名 （就是你的字段）
                const filterVal = ['date','address', 'name']; // 导出的表头字段名
                const list = that.excelData;
                const data = that.formatJson(filterVal, list);
                let time1,time2 = '';
                if(this.start !== '') {
                    time1 = moment(that.start).format('YYYY-MM-DD')
                }
                if(this.end !== '') {
                    time2 = moment(that.end).format('YYYY-MM-DD')
                }
                export_json_to_excel(tHeader, data, `[${time1}-${time2}]提现管理excel`);// 导出的表格名称，根据需要自己命名
            })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        }

    }

这是在单个页面里面使用 如果是需要在多个页面里面引入的话，建议使用 mixins ，就可以只引入一边就可以，然后再每个页面里面使用时间调用这个outExe（）方法即可;