方法一：前端处理，直接导出 e-table 组件的表格数据
import XLSX from 'xlsx';/*** el-table 表格导出* @param {*} idSelector id选择器* @param {*} name 导出表格名称* @param {*} remove 表格是否存在左/右固定列，存在则传入true，反之false* @param {*} bookType 表格文件后缀* @returns */
export const _exportExcel = (idSelector, name, remove = false, bookType = 'xlsx') => {/* generate workbook object from table */var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换var table = document.querySelector(idSelector).cloneNode(true);// 如果有设置固定列，需要移除对应元素，否则会同时生成多张列表if (remove) {try {table.removeChild(table.querySelector('.el-table__fixed-left'));table.removeChild(table.querySelector('.el-table__fixed-right')); //这里是双下划线} catch(err) {}}var wb = XLSX.utils.table_to_book(table, xlsxParam);/* get binary string as output */// 写入数据var wbout = XLSX.write(wb, { bookType, bookSST: true, type: 'array' });// 下载生成excel--参照方法二downloadXls(wbout, `${name}.${bookType}`);return wbout
}方法二：请求后端接口，返回blob文件流
/** * 注：若接口请求头有带文件名称返回，* 且服务端在header设置Access-Control-Expose-Headers: Content-Disposition，* 则前端无需自定义生成的文件名* const contentDisposition = res.headers['content-disposition'] // res 接口请求response数据* fileName: contentDisposition ? decodeURIComponent(contentDisposition.split('filename=')[1]) : '',*//*** 下载excel* @param {blob} fileArrayBuffer 文件流* @param {String} filename 文件名称*/
export const downloadXls = (fileArrayBuffer, filename) => {let data = new Blob([fileArrayBuffer], { type: 'application/vnd.ms-excel,charset=utf-8' });if (typeof window.chrome !== 'undefined') {// Chromevar link = document.createElement('a');link.href = window.URL.createObjectURL(data);link.download = filename;link.click();} else if (typeof window.navigator.msSaveBlob !== 'undefined') {// IEvar blob = new Blob([data], { type: 'application/force-download' });window.navigator.msSaveBlob(blob, filename);} else {// Firefoxvar file = new File([data], filename, { type: 'application/force-download' });window.open(URL.createObjectURL(file));}
};拓展：
js 实现纯前端将数据导出excel两种方式
前端配合后端接口导出excel表格
前端导出excel表格打不开的情况
vue axios下载excel时获取不到返回的消息头Content-Disposition
