VUE2导出el-table数据为excel并且按字段分多个sheet

首先在根目录下建一个文件夹export用来存储export.js

复制代码
import * as XLSX from 'xlsx'

function autoWidthFunc(ws, data) {
  // 设置每列的最大宽度
  const colWidth = data.map(row => row.map(val => {
    var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g') // 检测字符串是否包含汉字
    if (val == null) {
      return { wch: 10 }
    } else if (reg.test(val)) {
      return { wch: val.toString().length * 2 }
    } else {
      return { wch: val.toString().length }
    }
  }))
  // 初始化第一行的列宽
  const result = colWidth[0]
  for (let i = 1; i < colWidth.length; i++) {
    for (let j = 0; j < colWidth[i].length; j++) {
      if (result[j].wch < colWidth[i][j].wch) {
        result[j].wch = colWidth[i][j].wch
      }
    }
  }
  ws['!cols'] = result
}

function jsonToArray(key, jsonData) {
  return jsonData.map(v => key.map(j => v[j]))
}

// 新增:按指定字段分组
function groupByField(data, field) {
  const groupedData = {}
  data.forEach(item => {
    const fieldValue = item[field] || '未分类' // 如果字段值为空,默认归为 "未分类"
    if (!groupedData[fieldValue]) {
      groupedData[fieldValue] = []
    }
    groupedData[fieldValue].push(item)
  })
  return groupedData
}

const exportArrayToExcel = ({ key, data, title, filename, autoWidth, groupBy }) => {
  const wb = XLSX.utils.book_new()

  // 按指定字段分组
  const groupedData = groupByField(data, groupBy)

  // 遍历分组数据,为每个分组创建一个 sheet
  Object.keys(groupedData).forEach(groupName => {
    const arr = jsonToArray(key, groupedData[groupName])
    arr.unshift(title) // 添加标题行
    const ws = XLSX.utils.aoa_to_sheet(arr)

    if (autoWidth) {
      autoWidthFunc(ws, arr)
    }

    // 将 sheet 添加到工作簿中,sheet 名称为分组字段值
    XLSX.utils.book_append_sheet(wb, ws, groupName)
  })

  // 导出 Excel 文件
  XLSX.writeFile(wb, filename + '.xlsx')
}

export default {
  exportArrayToExcel
}

在页面中引入使用

复制代码
import excel from '../../export/export'


 exportExcel() {
      const params = {
        title: ['入库单号', '物料编码', '物料名称', '供应商代码', '生产日期', '批次信息', '单托重量', '入库时间'], // 表格title
        key: ['WarehouseEntryNnumber', 'MaterialCode', 'MaterialName', 'SupplierCode', 'DateofManufacture', 'DatchInformation', 'SingleTowingWeight', 'StorageTime'], // prop绑定的键值
        data: this.tableData, // 数据源
        autoWidth: true, // autoWidth等于true,那么列的宽度会适应那一列最长的值
        filename: '入库管理',
        groupBy: 'MaterialName' // 指定分组字段 根据MaterialName来区分sheet
      }
      excel.exportArrayToExcel(params)
      this.$message({
        message: '请稍等,正在导出为excel表格',
        type: 'success'
      })
    },

导出结果:

相关推荐
南屿im8 小时前
别再被引用坑了!JavaScript 深浅拷贝全攻略
前端·javascript
sophie旭8 小时前
一道面试题,开始性能优化之旅(6)-- 异步任务和性能
前端·javascript·性能优化
北城以北88889 小时前
Vue--Vue基础(一)
前端·javascript·vue.js
sniper_fandc10 小时前
Vue Router路由
前端·javascript·vue.js
知识分享小能手18 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
蓝莓味的口香糖19 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
reembarkation21 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
Roye_ack21 小时前
【项目实战 Day9】springboot + vue 苍穹外卖系统(用户端订单模块 + 商家端订单管理模块 完结)
java·vue.js·spring boot·后端·mybatis
gerrgwg21 小时前
React Hooks入门
前端·javascript·react.js
汉字萌萌哒1 天前
【 HTML基础知识】
前端·javascript·windows