引入xlsxjs文件
然后获取后台接口数据,最后拼接excel表格数据
示例函数一:
function downExcel(dataTbale) {
// Excel文件名称
var filename = "登录日志.xlsx";
// 数据格式
var data = [
["访问编号", "用户名称", "登录地址", "登录地点", "浏览器", "操作系统", "登录状态", "操作信息", "操作日期"]
];
// 手动定义表格头部
// 然后逐步添加表格每行数据,这里可以看到实际上我们导出的excel格式是一个二维数组
dataTbale.forEach((item, index) => {
let arr = [];
arr.push(item.currencyIsoCode);
arr.push(item.GRKJ__USERNAME__CST);
arr.push(item.GRKJ__IP__CST);
arr.push(item.GRKJ__LOGINADDRESS__CST);
arr.push(item.GRKJ__BROWSER__CST);
arr.push(item.GRKJ__OPERATESYSTEM__CST);
arr.push(item.GRKJ__LOGINSTATE__CST);
arr.push(item.GRKJ__CONTENT__CST);
arr.push(item.createdDate);
data.push(arr);
});
// 创建工作簿和工作表
var wb = XLSX.utils.book_new(), // 工作簿,即一个Excel文件
ws = XLSX.utils.aoa_to_sheet(data); // 工作表,即Excel内部的工作表
// "SheetJS" 为工作表名称,即Excel文件中工作表
XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
// 写出Excel工作簿
XLSX.writeFile(wb, filename);
}
这里仅用xlsxjs插件,导出后表格样式可能不会满足客户以及产品要求,所以还需引入xlsx-style.js插件,后续另起一篇着重说明该插件的配置以及功能
示例函数二:
/**
* @param {res:接口响应返回数据,name:excel导出名称}
*/
downloadFn(res, name) {
const _ = this;
if (res.headers.success) {
// IE 浏览器:a标签的download属性不支持IE,使用微软自带的 msSaveBlob 方法
// 其他浏览器:创建a标签 ,添加download属性,模拟鼠标点击事件
const blob = new Blob([res.data], { type: res.headers['content-type'] });
// const filename = res.headers['content-disposition'].split(';')[1].replace('filename=', '');
if (window.navigator.msSaveBlob) { // 兼容ie
try {
window.navigator.msSaveBlob(blob, name);
} catch (e) {
return e;
}
} else {
const a = document.createElement('a');
a.style.display = 'none';
a.download = name;
a.href = window.URL.createObjectURL(blob);
document.body.appendChild(a);
a.click();
}
} else {
let reader = new FileReader();
reader.onload = function (event) {
let content = reader.result
let message = JSON.parse(content).msg // 错误信息
_.$message.error(message);
}
reader.readAsText(res.data);
}
},