element导出功能设置不导出列

原创已于 2023-10-30 16:07:36 修改

· 510 阅读

1 ·

版权

文章标签：

#elementui

于 2023-10-30 15:59:00 首次发布

该篇文章介绍了如何在使用ElementUI的表格组件时，通过添加特定class（noExport）来控制哪些列不被导出到Excel。作者提供了一个JavaScript函数，利用file-saver和XLSX库实现导出功能并能处理自定义列排除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element导出功能设置不导出列

给需要导出的表格加上id，调用exportTableAsXLSX方法导出

在这里插入图片描述
找到不需要导出的column 设置class-name="noExport"即可

这样导出的excle就没有第一二列了

excle导出脚本：

// 导入依赖项
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
// 导入uuid.js工具
import { v4 as uuidv4 } from 'uuid'

/**
 * elemet-ui el-table数据导出为xlsx表格
 * @param {*} _targetId Element-UI el-table组件的id值
 */
export const exportTableAsXLSX = function (_targetId) {
  let tables = document.getElementById(_targetId).cloneNode(true)
  let header = tables.querySelector('table.el-table__header')
  let body = tables.querySelectorAll('table.el-table__body').length == 1 ? tables.querySelectorAll('table.el-table__body')[0] : tables.querySelectorAll('table.el-table__body')[tables.querySelectorAll('table.el-table__body').length - 1]
  let delCell = tables.querySelectorAll('.noExport')
  if (delCell && delCell.length){
    for (let i = 0;i < delCell.length;i++){
    delCell[i].remove()
    }
  }
  let wrapdiv = document.createElement('div')
  wrapdiv.appendChild(header)
  wrapdiv.appendChild(body)
  console.log('div:', wrapdiv)
  // 根据table生成Book工作簿
  let wb = XLSX.utils.table_to_book(wrapdiv)
  // 将Book工作簿作为输出
  let wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  // 尝试将当前table内容保存为excel文件
  try {
    FileSaver.saveAs(
      // 被导出的blob二进制对象
      new Blob([wbout], { type: 'application/octet-stream' }),
      // 导出文件的名称+后缀名
      uuidv4() + '.xlsx'
    )
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout)
  }
}