天天看点

xlsx导出表格示例函数一:示例函数二:

引入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);
      }
    },
           

继续阅读