基于 element-ui 表格组件 el-table 导出表格数据

方法一:前端处理,直接导出 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));
  }
};

拓展:

js 实现纯前端将数据导出excel两种方式

前端配合后端接口导出excel表格

前端导出excel表格打不开的情况

vue axios下载excel时获取不到返回的消息头Content-Disposition

最近更新

  1. TCP协议是安全的吗?

    2024-05-12 09:30:08       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-12 09:30:08       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-12 09:30:08       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-12 09:30:08       18 阅读

热门阅读

  1. Vue3知识总结-2

    2024-05-12 09:30:08       10 阅读
  2. npm 常用指令介绍

    2024-05-12 09:30:08       8 阅读
  3. Spring Boot进阶 - Starter原理

    2024-05-12 09:30:08       8 阅读
  4. python - pip安装及使用详解

    2024-05-12 09:30:08       10 阅读
  5. 高斯-牛顿法C实现

    2024-05-12 09:30:08       10 阅读
  6. Oracle数据库之条件查询、模糊查询和排序(四)

    2024-05-12 09:30:08       11 阅读
  7. 介绍 TensorFlow 的基本概念和使用场景

    2024-05-12 09:30:08       9 阅读
  8. 井字棋(免费版)

    2024-05-12 09:30:08       9 阅读
  9. 【socket】 linux C++ socket 优化参数

    2024-05-12 09:30:08       7 阅读
  10. Jtti:怎么检测香港服务器的响应速度?

    2024-05-12 09:30:08       11 阅读
  11. 服务器硬件命令查看

    2024-05-12 09:30:08       9 阅读
  12. k8s部署针对外部服务器的prometheus服务

    2024-05-12 09:30:08       9 阅读