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

yangqii

已于 2024-05-11 16:59:32 修改

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2024-05-11 16:32:42 首次发布

本文链接：https://blog.csdn.net/yangqii/article/details/138720657

方法一：前端处理，直接导出 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,