表格数据导出为Excel

news2025/4/7 22:43:33

环境及插件配置:(理论上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 = [], // 列头label
    headerPropList = [], // 列头prop
    dataList = [], // 数据
    label = key?.label || 'label', // 表格label的key
    prop = key?.prop || "prop"; // 表格prop的key
  tableHeader.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.coloradmin.cn/o/2325909.html

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

相关文章

SvelteKit 最新中文文档教程(16)—— Service workers

前言 Svelte,一个语法简洁、入门容易,面向未来的前端框架。 从 Svelte 诞生之初,就备受开发者的喜爱,根据统计,从 2019 年到 2024 年,连续 6 年一直是开发者最感兴趣的前端框架 No.1: Svelte …

Flutter项目之构建打包分析

目录: 1、准备部分2、构建Android包2.1、配置修改部分2.2、编译打包 3、构建ios包3.1、配置修改部分3.2、编译打包 1、准备部分 2、构建Android包 2.1、配置修改部分 2.2、编译打包 执行flutter build apk命令进行打包。 3、构建ios包 3.1、配置修改部分 3.2、编译…

24、网络编程基础概念

网络编程基础概念 网络结构模式MAC地址IP地址子网掩码端口网络模型协议网络通信的过程(封装与解封装) 网络结构模式 C/S结构,由客户机和服务器两部分组成,如QQ、英雄联盟 B/S结构,通过浏览器与服务器进程交互&#xf…

Mentalab Explore Pro携手 Wearanize + 数据集,推动睡眠科学研究

在神经科学和睡眠研究的领域,精确监测大脑活动是获取深入见解的关键。传统多导睡眠监测(PSG)设备虽然提供了详尽的数据,但其操作的复杂性和成本限制了其在更广泛场景中的应用。可穿戴技术的兴起提供了一种新的数据收集方式&#x…

基于 RK3588 的 YOLO 多线程推理多级硬件加速引擎框架设计(代码框架和实现细节)

一、前言 接续上一篇文章,这个部分主要分析代码框架的实现细节和设计理念。 基于RK3588的YOLO多线程推理多级硬件加速引擎框架设计(项目总览和加速效果)-CSDN博客https://blog.csdn.net/plmm__/article/details/146542002?spm1001.2014.300…

【Yolov8部署】 VS2019+opencv+onnxruntime 环境下部署目标检测模型

文章目录 前言一、导出yolov8模型为onnx文件二、VS2019中环境配置三、源码与实际运行 前言 本文主要研究场景为工业场景下,在工控机与工业相机环境中运行的视觉缺陷检测系统,因此本文主要目的为实现c环境下,将yolov8已训练好的检测模型使用o…

论文阅读:Dual Anchor Graph Fuzzy Clustering for Multiview Data

论文地址:Dual Anchor Graph Fuzzy Clustering for Multiview Data | IEEE Journals & Magazine | IEEE Xplore 代码地址:https://github.com/BBKing49/DAG_FC 摘要 多视角锚图聚类近年来成为一个重要的研究领域,催生了多个高效的方法。然而&#…

乐橙R10 AI智能锁:以「技术减法」终结智能家居「参数内卷」

1 行业迷思:当「技术内卷」背离用户真实需求 “三摄猫眼”、“0.3秒人脸解锁”、“DeepSeek大模型”……智能锁行业的营销话术日益浮夸,但用户体验却陷入“功能冗余”与“操作复杂”的泥潭。 一位用户在社交平台直言:“我的智能锁有六个摄像…

如何使用 FastAPI 构建 MCP 服务器

哎呀,各位算法界的小伙伴们!今天咱们要聊聊一个超酷的话题——MCP 协议!你可能已经听说了,Anthropic 推出了这个新玩意儿,目的是让 AI 代理和你的应用程序之间的对话变得更顺畅、更清晰。不过别担心,为你的…

当 EcuBus-Pro + UTA0401 遇上 NSUC1500

文章目录 1.前言2.EcuBus-Pro简介2.1 官方地址2.2 概览 3.纳芯微NSUC1500简介3.1 NSUC1500概述3.2 产品特性 4.测试环境5.基础功能5.1 数据发送5.2 数据监控 6.自动化功能6.1 脚本创建6.2 脚本编辑6.3 脚本编辑与测试 7.音乐律动7.1 导入例程7.2 效果展示 ECB工程 1.前言 最近…

【FreeRTOS】裸机开发与操作系统区别

🔎【博主简介】🔎 🏅CSDN博客专家 🏅2021年博客之星物联网与嵌入式开发TOP5 🏅2022年博客之星物联网与嵌入式开发TOP4 🏅2021年2022年C站百大博主 🏅华为云开发…

Deepseek API+Python 测试用例一键生成与导出 V1.0.4 (接口文档生成接口测试用例保姆级教程)

接口文档生成接口测试用例保姆级教程 随着测试需求的复杂性增加,测试用例的设计和生成变得愈发重要。Deepseek API+Python 测试用例生成工具在 V1.0.4 中进行了全方位的优化和功能扩展,特别是对接口测试用例设计的支持和接口文档的智能解析处理。本文将详细介绍 V1.0.4 版本…

CET-4增量表

CET-4词表-增量表 注: 【1】所谓增量,是相对于高中高考之增量 即,如果你是在读大学生,高中英语单词过关了,准备考CET-4,那么侧重下面的增量词表的学习,也算是一条捷径吧 ^_^ 【2】本结果数据 官…

DeepSeek详解:探索下一代语言模型

文章目录 前言一、什么是DeepSeek二、DeepSeek核心技术2.1 Transformer架构2.1.1 自注意力机制 (Self-Attention Mechanism)(a) 核心思想(b) 计算过程(c) 代码实现 2.1.2 多头注意力 (Multi-Head Attention)(a) 核心思想(b) 工作原理(c) 数学描述(d) 代码实现 2.1.3 位置编码 (…

FOC 控制笔记【三】磁链观测器

一、磁链观测器基础 1.1 什么是磁链 磁链(magnetic linkage)是电磁学中的一个重要概念,指导电线圈或电流回路所链环的磁通量。单位为韦伯(Wb),又称磁通匝。 公式为: 线圈匝数 穿过单匝数的…

SpringBoot项目读取自定义的配置文件

先说使用场景: 开发时在resource目录下新建一个 config 文件夹, 在里面存放 myconf.properties 文件, 打包后这个文件会放到与jar包同级的目录下, 如下图 关键点:自定义的文件名(当然后缀是.properties),自定义的存放路径。 主要的要求是在打包后运行过…

在PyCharm 中免费集成Amazon CodeWhisperer

CodeWhisperer 是Amazon发布的一款免费的AI 编程辅助小工具,可在你的集成开发环境(IDE)中生成实时单行或全函数代码建议,帮助你快速构建软件。简单来说,Amazon CodeWhisperer就是你写一段注释(支持中文&…

[7-02-02].第15节:生产经验 - 消费者相关操作

Kafka笔记大纲 五、生产经验——分区的分配以及再平衡: 4.1.生产经验——分区的分配以及再平衡 4.2.参数: 5.4.1 Range 以及再平衡

Matlab_Simulink中导入CSV数据与仿真实现方法

前言 在Simulink仿真中,常需将外部数据(如CSV文件或MATLAB工作空间变量)作为输入信号驱动模型。本文介绍如何高效导入CSV数据至MATLAB工作空间,并通过From Workspace模块实现数据到Simulink的精确传输,适用于运动控制…

文件操作与IO—File类

目录 1 属性 2 构造方法 3 常用方法 4 示例代码 1 属性 修饰符与类型 属性 含义 static String pathSeparator 依赖于系统的路径分隔符,String类型的表示 static char pathSeparator 依赖于系统的路径分隔符,char类型的表示 2 构造方法 构造…