el-table导出Excel表格

1. 安装 xlsx 插件

npm install xlsx

2. 引入

 import XLSX from 'xlsx'

<el-button @click='excelExport'></el-button>
<el-table  id='TableRoute'> </el-table>
<script>
	excelExport() {
		var fix = document.querySelector('.el-table__fixed');
		var table1;
		if ( fix ) { 
			table1 = document.querySelector("#TableRoute").removeChild(fix);  // element框架自带两组 table 导出Excel表格会重复,所以需要去除 el-table中的子节点el-table__fixed
        	document.querySelector("#TableRoute").appendChild(fix) // 在移除完成后把子节点再追加到table中,不然会影响到 el-table的布局
		} else {
			table1 = document.querySelector("#TableRoute")
		}
        var sheet = XLSX.utils.table_to_sheet(table1);	//将一个table对象转换成一个sheet对象
        openDownloadDialog(sheet2blob(sheet),'模板数据.xlsx');  // '下载.xlsx 为下载Excel表格的文件名称,可自行设置'
        function sheet2blob(sheet, sheetName) {
		    sheetName = sheetName || 'sheet1';
		    var workbook = {
		        SheetNames: [sheetName],
		        Sheets: {}
		    };
		    workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
		    var wopts = {
		        bookType: 'xlsx', // 要生成的文件类型
		        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
		        type: 'binary'
		    };
		    var wbout = XLSX.write(workbook, wopts);
		    var blob = new Blob([s2ab(wbout)], {
		        type: "application/octet-stream"
		    }); // 字符串转ArrayBuffer
		    function s2ab(s) {
		        var buf = new ArrayBuffer(s.length);
		        var view = new Uint8Array(buf);
		        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        		return buf;
    		}
	   		return blob;
		}
		function openDownloadDialog(url, saveName) {
		    if (typeof url == 'object' && url instanceof Blob) {
		        url = URL.createObjectURL(url); // 创建blob地址
		    }
		    var aLink = document.createElement('a');
		    aLink.href = url;
		    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
		    var event;
		    if (window.MouseEvent) event = new MouseEvent('click');
		    else {
		        event = document.createEvent('MouseEvents');
		        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		    }
		    aLink.dispatchEvent(event);
		}
	}
</script>

上图

下载Excel表格