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

embedded/2025/3/26 1:34:10/

首先在根目录下建一个文件夹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)// 遍历分组数据,为每个分组创建一个 sheetObject.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: ['入库单号', '物料编码', '物料名称', '供应商代码', '生产日期', '批次信息', '单托重量', '入库时间'], // 表格titlekey: ['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'})},

导出结果:


http://www.ppmy.cn/embedded/176663.html

相关文章

从零到一开发一款 DeepSeek 聊天机器人

AI聊天机器人 目标设计方案系统架构技术选型功能模块 实现代码环境配置安装依赖 核心代码API 请求函数主循环函数 功能扩展1. 情感分析2. 多语言支持3. 上下文记忆4. 用户身份识别 总结附录 目标 开发一个智能聊天机器人&#xff0c;旨在为用户提供自然、流畅的对话体验。通过…

二分查找------查找区间

1. 题目 2. 思路和题解 这道题虽然是道中等题&#xff0c;并且看起来很复杂&#xff0c;但是实际上就是给定一个数组和目标值&#xff0c;让我们去寻找该目标值在数组中的位置。题目还提到说设计O(log n)的算法解决问题&#xff0c;更进一步暗示我们去用二分查找。要找开始位置…

DeepSeek+RAG局域网部署

已经有很多平台集成RAG模式&#xff0c;dify&#xff0c;cherrystudio等&#xff0c;这里通过AI辅助&#xff0c;用DS的API实现一个简单的RAG部署。框架主要技术栈是Chroma,langchain,streamlit&#xff0c;答案流式输出&#xff0c;并且对答案加上索引。支持doc,docx,pdf,txt。…

《AI大模型开发笔记》企业RAG技术实战(二)

接上一篇 《AI大模型开发笔记》企业RAG技术实战(一)https://mp.csdn.net/mp_blog/creation/editor/146381354 使用llamaindex实例 https://docs.llamaindex.ai/en/stable/api_reference/ 环境配置 我们继续使用前面langchain例子的python虚环境,不用新建,激活就行 …

Vue3中router最佳封装落地

文章目录 前言一、拆分路由文件夹&#xff1f;二、main.ts中注册路由总结 前言 router在使用过程中如果我们直接在一个文件的一个数组中配置&#xff0c;最后路由越来越多会导致不易管理&#xff0c;我们可以将一个页面的路由配置在一个数组中最后统一导入&#xff0c;这样就会…

eclipse [jvm memory monitor] SHOW_MEMORY_MONITOR=true

eclipse虚拟机内存监控设置SHOW_MEMORY_MONITORtrue D:\eclipse-jee-oxygen-2-win32-x86_64\workspace\.metadata\.plugins\org.eclipse.core.runtime\.settings org.eclipse.ui.prefs (文件比较多&#xff0c;别找错了&#xff09; SHOW_MEMORY_MONITORtrue 重启 -xms 1024…

STL性能优化方法

STL&#xff08;Standard Template Library&#xff09;性能优化实战&#xff0c;涉及数据结构选择、内存管理、算法优化等多个方面。以下详细讲解STL性能优化方法&#xff0c;给出实践建议和典型场景&#xff1a; &#x1f4cc; 一、STL性能问题分析 STL性能瓶颈通常包括&…

k8s集群添加一个新GPU节点

前提 现在是已经搭建好一个GPU集群&#xff0c;需要添加一个新的节点&#xff08;3090卡&#xff09;&#xff0c;用来分担工作&#xff0c;大致可以分为以下几个部分&#xff1a; 1&#xff0c;安装GPU驱动2&#xff0c;安装docker3&#xff0c;安装cri-dockerd4&#xff0c…