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

server/2025/3/30 3:47:32/

首先在根目录下建一个文件夹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/server/179579.html

相关文章

TCP/IP协议的三次握手和四次挥手

TCP/IP协议是互联网通信的基础&#xff0c;而“三次握手”和“四次挥手”是TCP连接建立和断开的关键过程。下面我们用通俗易懂的方式&#xff0c;结合图形来解释这两个过程。 一、三次握手&#xff1a;建立连接 三次握手是TCP协议用来建立连接的过程&#xff0c;确保客户端和…

遍历整个列表

在本章中&#xff0c;你将学习如何遍历遍 整个列表&#xff0c;这只需要几行代码&#xff0c;无论列表有多长。循环让你能够对列表的每个元素都采取一个或一系列相同的措施&#xff0c;从而高效地处理任何长度的列表&#xff0c;包括包含数千乃至数百万个元素的列表。 遍历整个…

通过git文件查看大模型下载链接的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【JavaScript】金丹期功法

目录 数组声明数组数组的基本使用遍历数组案例&#xff1a;求数组中的最值数组操作查询数据修改数据新增数据案例&#xff1a;数组筛选删除数据 案例&#xff1a;渲染柱形图 数组 数组&#xff08;Array&#xff09;是一种可以按顺序保存数据的数据类型 场景&#xff1a;如果…

免费使用Gemini 2.5 Pro的完整教程

谷歌3月25日发布的Gemini 2.5 Pro可能成为AI发展史上的关键转折点。 尽管企业对其最新模型夸大其词已成常态,但2.5 Pro发布即登顶LMArena排行榜(该榜单由人类评估员根据交互质量和实用性对AI进行排名)的事实表明,这绝非营销噱头。 该模型的独特之处在于其架构设计。 Gemi…

python处理音频相关的库

1 音频信号采集与播放 pyaudio import sys import pyaudio import wave import timeCHUNK 1024 FORMAT pyaudio.paInt16 CHANNELS 1#仅支持单声道 RATE 16000 RECORD_SECONDS 3#更改录音时长#录音函数&#xff0c;生成wav文件 def record(file_name):try:os.close(file_…

Cache 映射方式详解

Cache 映射方式详解 一、直接映射&#xff08;Direct Mapping&#xff09; 原理&#xff1a;每个主存块只能映射到 唯一的一个 Cache 块&#xff0c;映射公式为&#xff1a;Cache 块号主存块号modCache 块数 示例&#xff1a; Cache 大小&#xff1a;8 块&#xff08;块号 …

Python入门基础

python基础类型转换 str()与int()类型转换 name 张三 age 20 print(type(name),type(age))print(我叫name 今年&#xff0c; str(age)岁 )a10 b198.8 cFalse print(type(a),type(b),type(c)) print(str(a),str(b),str(c))s1 128 f198.7 s276.77 ffTrue s3hello print(type(s…