表格数据导出为Excel

环境及插件配置:(理论上vue2应该也可以使用,没有试验过)

"vue": "^3.2.36",
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4",
"file-saver": "^2.0.5",
"xlsx": "^0.18.5"

必须安装 file-saver 与 xlsx

该方法中用到了一个判断数据类型的小方法

 * 判断数据类型* @param {any} value * @returns {String}* 返回数据为:* "[object Number]","[object String]","[object Boolean]","[object Date]","[object RegExp]"* "[object Object]","[object Array]","[object Function]","[object Null]","[object Undefined]"*/function getDataType(value) {return Object.prototype.toString.call(value)
}

将table表格导出为Excel

import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver';function getDataType(value) {return Object.prototype.toString.call(value)
}/*** 将table表格导出为Excel* @param {Array} tableData 表格数据* @param {Array} tableHeader 表格头* @param {Object | String} exportConfig 导出的Excel文件配置信息* {*    width:列宽,可传入list,传入多少列,即可设置多少列 widthList - 前三列:[120,120,120] 默认每一列宽度120*    name: 导出文件的名称,默认当前日期 - xxxx年xx月xx日* }* String - 允许只传入文件名称* @param {Object} key 解析数据所需key: label - 表头显示字段 prop - 表格渲染字段* @returns {null}* 无返回*/function exportToExcel(tableData, tableHeader, exportConfig = {width: '120',widthList: [],name: "",
}, key = {label: 'label',prop: "prop"
}) {let exportList = [], // 导出目标headerLabelList = [], // 列头labelheaderPropList = [], // 列头propdataList = [], // 数据label = key?.label || 'label', // 表格label的keyprop = key?.prop || "prop"; // 表格prop的keytableHeader.forEach(item => {headerLabelList.push(item[label])headerPropList.push(item[prop])})tableData.forEach(item => {let itemList = []headerPropList.forEach(itemProp => {itemList.push(item[itemProp])})dataList.push([...itemList])})exportList = [headerLabelList, ...dataList]// 数据转换工作表const worksheet = XLSX.utils.aoa_to_sheet(exportList)let wsList = Array(tableHeader.length).fill({ wpx: '120' }) // 导出的Excel列宽let exportName = new Date().Format('yyyy-MM-dd') // 导出的文件名称 - 默认当天时间if (exportConfig) {if (getDataType(exportConfig) == "[object String]") {exportName = exportConfig} else if (getDataType(exportConfig) == "[object Object]") {if (getDataType(exportConfig.widthList) == '[object Array]' && exportConfig.widthList.length) {wsList = exportConfig.widthList.map(item => {return { wpx: item }})} else {let wpx = '120'if (exportConfig.width) {wpx = exportConfig.width}wsList = Array(tableHeader.length).fill({ wpx })}if (exportConfig?.name) {exportName = exportConfig.name}}}worksheet['!cols'] = wsList// 创建工作簿并添加转换好的工作表const workbook = XLSX.utils.book_new()XLSX.utils.book_append_sheet(workbook, worksheet, exportName)// 生成Excel文件const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });// 使用blob和FileReader创建一个URL然后下载const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });saveAs(dataBlob, exportName + '.xlsx')
}export {exportToExcel
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/75372.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Photoshop 2025 Mac中文 Ps图像编辑软件

Photoshop 2025 Mac中文 Ps图像编辑软件 文章目录 Photoshop 2025 Mac中文 Ps图像编辑软件一、介绍二、效果三、下载 一、介绍 Adobe Photoshop 2025 Mac版集成了多种强大的图像编辑、处理和创作功能。①强化了Adobe Sensei AI的应用,通过智能抠图、自动修复、图像…

rust Send Sync 以及对象安全和对象不安全

开头:菜鸟小明的疑惑 小明: “李哥,我最近学 Rust,感觉它超级严谨,啥 Send、Sync、对象安全、静态分发、动态分发的,我都搞晕了!为啥 Rust 要设计得这么复杂啊?” 小李&#xff0…

JAVA:利用 JSONPath 操作JSON数据的技术指南

1、简述 JSONPath 是一种强大的工具,用于查询和操作 JSON 数据。类似于 SQL 的语法,它为处理复杂的 JSON 数据结构提供了简单且高效的解决方案。✨ 代码样例:https://gitee.com/lhdxhl/springboot-example.git 本文将介绍 JSONPath 的基本…

服务器磁盘卷组缓存cache设置介绍

工具1: storcli a. 确认软件包是否安装 [rootlocalhost ~]#rpm -qa | grep storcli storcli-1.21.06-1.noarch 备注:若检索结果为空,需要安装对应的软件安装包。安装命令如下: #rpm -ivh storcli-xx-xx-1.noarch.rpm b. 查看逻辑…

java项目分享-分布式电商项目附软件链接

今天来分享一下github上最热门的开源电商项目安装部署,star 12.2k,自行安装部署历时两天,看了这篇文章快的话半天搞定!该踩的坑都踩完了,软件也打包好了就差喂嘴里。 项目简介 mall-swarm是一套微服务商城系统&#xf…

QtWebApp使用

QtWebApp 是一个轻量级的 HTTP 服务器库,基于 Qt 网络模块(QTcpServer 和 QTcpSocket)实现,适用于嵌入式设备、本地服务或需要快速搭建 Web 接口的 Qt 应用程序。 1. 核心功能 HTTP/1.1 服务器 支持 GET、POST、PUT、DELETE 等标准 HTTP 方法。 解析请求头、查询参数(Qu…

用Rust和WebAssembly打造轻量级前端加密工具

开头聊两句 最近在折腾前端项目时,发现一个问题:很多时候需要在浏览器里做点加密作,比如保护用户输入的数据,但JavaScript跑起来总感觉慢吞吞的。于是我开始琢磨,能不能用Rust写个高性能的加密模块,再通过W…

Linux NUC小主机化身视频会议服务器: 技术优势与部署实战

在远程办公常态化背景下,视频会议系统对硬件的轻量化、低功耗与稳定性提出了更高要求。基于Intel NUC(Next Unit of Computing)打造的Linux服务器方案,凭借其高性能、低能耗和可扩展性优势,正成为中小企业搭建视频会议…

idea查看class字节码

概述 如何查看class字节码?话不多说,直接看示例! 方法一 选中class类,然后选择 View -> Show Bytecode 方法二 安装jclasslib插件 方法三 Settings -> Tools -> External Tools 添加一个tool //指定javap.exe路…

python使用cookie、session、selenium实现网站登录(爬取信息)

一、使用cookie 这段代码演示了如何使用Python的urllib和http.cookiejar模块来实现网站的模拟登录,并在登录后访问需要认证的页面。 # 导入必要的库 import requests from urllib import request, parse# 1. 导入http.cookiejar模块中的CookieJar类,用…

机器人基础知识-1

1.六轴机器人中的六轴是什么? 第一轴(J1):底座旋转 控制机器人整体绕垂直轴旋转(左右摆动),决定工作范围的水平方向。 第二轴(J2):下臂前后摆动 驱动机器人的…

将代理连接到 Elasticsearch 使用模型上下文协议

作者:来自 Elastic Jedr Blaszyk 及 Joe McElroy 让我们使用 Model Context Protocol 服务器 与 你的 数据 在 Elasticsearch 中聊天。 如果与你的数据交互像与同事聊天一样轻松,会怎样?想象一下,你只需简单地问:“显…

Vue 组件 - 动态组件

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 组件 - 动态组件 目录 动态组件 选项卡页面示例 更简单写法 增加输入框 弥补措施 总结 动态组件 选项卡页面示例 功能:选项卡功能,设置导航点击哪个显示相应页面。 设置三个全局组件&#…

Telnet协议详解:本质与操作逻辑

一、Telnet的本质 1. 协议定位 Telnet是一种基于TCP的明文远程终端控制协议,属于应用层协议。其核心功能是通过网络模拟物理终端,实现对远程主机的命令行控制。 2. 核心特性 网络虚拟终端(NVT):建立统一的字符编码标…

Android 使用CameraX实现预览、拍照、录制视频(Java版)

Android 官方关于相机的介绍如下: https://developer.android.google.cn/media/camera/get-started-with-camera?hlzh_cn 一、开始使用 Android 相机 Android相机一般包含前置摄像头和后置摄像头,使用相机可以开发一系列激动人心的应用,例…

面向对象

一、Scala包 1、基本语法 package 包名 2、Scala 包的三大作用(和 Java 一样) (1)区分相同名字的类 (2)当类很多时,可以很好的管理类 (3)控制访问范围 二、包说明 1、说明…

MySQL多表联查

一、数据库表结构 假设我们有两个表:users 和 orders,users 表存储用户信息,orders 表存储订单信息,一个用户可以有多个订单,通过 user_id 关联两个表。 users 表 字段名数据类型描述user_idINT用户 ID,…

如何迁移AxureCloud到新服务器?

前言 常有朋友遇到在更换服务器时或者本地AxureCloud迁移到服务器上时,如何正确迁移AxureCloud,让原有的原型可以正常访问呢? 事前准备 Navicat:用于迁移数据库。 AxureCloud:和原安装版本一致。 MySQL&#xff1…

CSGO 皮肤交易平台后端 (Spring Boot) 代码结构与示例

csgo-market/ ├── pom.xml (or build.gradle) └── src/└── main/├── java/│ └── com/│ └── yourcompany/│ └── csgomarket/│ ├── CsgomarketApplication.java # Spring Boot 启动类│ ├── conf…

mac Python多版本第三方库的安装路径

终端查看python版本是 3.12,但是pycharm使用的python版本是 3.9 终端正常安装包以后,pycharm都可以正常使用,但是将 pycharm的python换成 3.12 版本,之前安装的库都没有了 通过终端查看安装库的位置,确实是安装到py…