引入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) { // 兼容ietry {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.resultlet message = JSON.parse(content).msg // 错误信息_.$message.error(message);}reader.readAsText(res.data);}},