方法一:前端处理,直接导出 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') {
// Chrome
var link = document.createElement('a');
link.href = window.URL.createObjectURL(data);
link.download = filename;
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE
var blob = new Blob([data], { type: 'application/force-download' });
window.navigator.msSaveBlob(blob, filename);
} else {
// Firefox
var file = new File([data], filename, { type: 'application/force-download' });
window.open(URL.createObjectURL(file));
}
};
拓展: