当前位置：首页 > news >正文

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

news 来源：原创 2025/4/30 17:15:36

首先在根目录下建一个文件夹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'
      })
    },

导出结果：