elementui导出表格

导出表格分为两种：1、全部导出 2、选择对应的行与列导出

全部导出

1、Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)

安装

npm install --save xlsx file-saver

2、 给表格添加一个id，导出文件事件需要使用

点击导出

handleDownload(){
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "idea.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      }

https://www.jianshu.com/p/1971fc5b97ca

按需导出

1、安装依赖

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

2、在src里面新建一个文件夹叫vendor，再去github上下载两个文件Blob.js和Export2Excel.js,放入vendor文件夹里面
3、打开Export2Excel.js，修改第二行代码为

require('script-loader!@/vendor/Blob');

4、打开webpack.base.conf.js文件（没有的话打开vue.config.js文件）修改resolve -> alias(一般这一步不需要，项目自己带有，但保险起见还是去看看)

一定要有蓝框部分代码
5、在你前端页面需要导excel的页面的方法里面

handleSelectionChange (val) { // 操作多选
      this.multipleSelection = val; // 多选的行会存入multipleSelection数组中
    }

点击导出按钮时触发的事件

//按钮绑定的事件名
export2Excel () {
 var that = this;
 require.ensure([], () => {
   const { export_json_to_excel } = require('@/vendor/Export2Excel'); // 这里必须使用绝对路径，使用@/+存放export2Excel的路径
   const tHeader = ['表头名称1', '表头名称2', '表头名称3']; // 导出的表头名信息，也就是选中列
   const filterVal = ['表头字段名1', '表头字段名2', '表头字段名3']; // 导出的表头字段名，需要导出表格字段名
   const list = that.multipleSelection ;//此处为你选中的数据
   const data = that.formatJson(filterVal, list);

   export_json_to_excel(tHeader, data, 'excel表格名字');// 导出的表格名称，根据需要自己命名
 });
},
// 格式转换，直接复制即可
formatJson (filterVal, jsonData) {
	 return jsonData.map(v => filterVal.map(j => v[j]));
}