纯前端使用XLSX导出excel表格

news2024/12/23 22:30:19

1 单个sheet 

page.js(页面中的导出方法)

import { exportExcel } from '../../../utils/exportExcel.js';   
 
    leadOut() {
      const arr = [
        { id: 1, name: '张三', age: 14, sex: '男' },
        { id: 2, name: '李四', age: 15, sex: '女' },
        { id: 3, name: '王五', age: 16, sex: '男' },
      ];
      const allRecordList = arr.map((item, index) => {
        return {
          序号: String(index + 1),
          姓名: item.name,
          年龄: String(item.age),
          性别: item.sex,
        };
      });
      const data = {
        人员列表: allRecordList,
      };
      const columnHeaders = {
        人员列表: ['序号', '姓名', '年龄', '性别'],
      };

      const cellStyle = [{ wch: 6 }, { wch: 10 }, { wch: 10 }, { wch: 10 }];
      const fileName = '人员列表';
      exportExcel(columnHeaders, data, cellStyle, fileName);
    },

 exportExcel.js(封装导出方法)

import * as XLSX from "xlsx";// 下载XLSX插件 npm i XLSX

export function exportExcel(columnHeaders, data, cellStyle, fileName) { // columnHeaders 表头信息  data数据  cellStyle 列宽度 fileName 导出文件名
  function outputXlsxFile(data, wscols, xlsxName) { // 用于生成并保存 Excel 文件
    const sheetNames = [];// 存储 sheet 名称
    const sheetsList = {};// 存储所有 sheet 的数据
    const wb = XLSX.utils.book_new();// 创建了一个新的工作簿对象 wb
    console.log(data, 'data');
    for (const key in data) {
      sheetNames.push(key);
      const columnHeader = columnHeaders[key] // 获取当前 sheet 对应的列头信息 columnHeader
      const temp = transferData(data[key], columnHeader);
      sheetsList[key] = XLSX.utils.aoa_to_sheet(temp);// 创建 sheet 对象
      sheetsList[key]["!cols"] = wscols;// 当前 sheet 设置列宽 wscols
    }
    console.log(sheetNames, 'sheetNames');
    console.log(sheetsList, 'sheetsList');
    console.log(wb, 'wb');
    wb.SheetNames = sheetNames;
    wb.Sheets = sheetsList;
    XLSX.writeFile(wb, xlsxName + ".xlsx");// 将工作簿保存为 Excel 文件
  }

  function transferData(data, columnHeader) { // 将数据按照列头信息进行转换,将每一行的数据转换成一个数组
    const content = [];
    content.push(columnHeader);
    data.forEach((item, index) => {
      const arr = [];// 用于存储当前行的数据
      columnHeader.map(column => {
        arr.push(item[column]);// 使用 map 方法遍历 columnHeader,将每个列头对应的属性值添加到 arr 数组中
      })
      content.push(arr);// 将 arr 数组添加到 content 数组中
    });
    console.log(content, 'content');
    return content;
  }
  outputXlsxFile(
    data,
    cellStyle,
    fileName
  );
}

 为了方便理解导出过程,变量打印如下图所示:

2 多个sheet 

当然,也可以导出多个sheet表,此时页面效果和数据如下:

    leadOut() {
      const arr = [
        { id: 1, name: '张三', age: 14, sex: '男' },
        { id: 2, name: '李四', age: 15, sex: '女' },
        { id: 3, name: '王五', age: 16, sex: '男' },
      ];
      const arr2 = [
        { id: 1, class: '一年级', count: 30, teacher: '张三' },
        { id: 2, class: '二年级', count: 31, teacher: '李四' },
        { id: 3, class: '三年级', count: 32, teacher: '王五' },
      ];
      const allRecordList = arr.map((item, index) => {
        return {
          序号: String(index + 1),
          姓名: item.name,
          年龄: String(item.age),
          性别: item.sex,
        };
      });
      const allRecordList2 = arr2.map((item, index) => {
        return {
          序号: String(index + 1),
          班级: item.class,
          人数: String(item.count),
          老师: item.teacher,
        };
      });
      const data = {
        人员列表: allRecordList,
        班级列表: allRecordList2,
      };
      const columnHeaders = {
        人员列表: ['序号', '姓名', '年龄', '性别'],
        班级列表: ['序号', '班级', '人数', '老师'],
      };

      const cellStyle = [{ wch: 6 }, { wch: 10 }, { wch: 10 }, { wch: 10 }];
      const fileName = '人员列表';
      exportExcel(columnHeaders, data, cellStyle, fileName);
    },

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

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

相关文章

6.4.如何生成SDP

在我们前面的课程中呢,我已经向你介绍了很多sdp相关的内容,那今天呢,我们来看看如何生成sdp。 那我们的目标呢,当然就是生成这样一个文本,那这个文本呢,就是sdp文本那里边包括了各种各样的媒体信息&#…

GPIO模拟MDIO

背景 CPU:AST2500 驱动里实现GPIO模拟MDIO驱动,参考内核驱动mdio-bitbang.c和mdio-gpio.c,当前项目不支持设备树,驱动需要改成platform注册 MDIO介绍 SMI接口 SMI是MAC内核访问PHY寄存器接口,它由两根线组成,双工…

论文阅读《Parameterized Cost Volume for Stereo Matching》

论文地址:https://openaccess.thecvf.com/content/ICCV2023/papers/Zeng_Parameterized_Cost_Volume_for_Stereo_Matching_ICCV_2023_paper.pdf 源码地址:https://github.com/jiaxiZeng/Parameterized-Cost-Volume-for-Stereo-Matching 概述 现有的立体匹…

c# 字段和属性(get、set、init)

目录 基本概念: 个人理解: 访问器的默认写法: set与init无法共存: init: 必须在类的实例化时给字段赋值的情况(require属性): 基本概念: “字段”就是类内成员变量,一般为了隐藏数据&…

超详细教程:使用React实现动态轮播图

前言 轮播组件是常见的一种方式,用来展示图像、信息或者是广告。我们可以使用React来创建一个轮播组件,并且利用其中的State和effect Hook来创建一款动态的、可以自动播放的轮播组件。 效果 轮播组件会展示一个平铺的图片列表。在图片列表下方是一组小…

java定位系统源码,UWB技术的无线定位系统源码

UWB技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。UWB最优的应用环境是室内或者相对密闭的空间,有着厘米级的定位精度,不仅可以非常精准地进行位置跟踪,还可以快速地进行数据传输。 智…

基于亚马逊云科技新功能:Amazon SageMaker Canvas无代码机器学习—以构建货物的交付状态检测模型实战为例深度剖析以突显其特性

授权说明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在亚马逊云科技开发者社区、 知乎、自媒体平台、第三方开发者媒体等亚马逊云科技官方渠道。 目录 🚀一. Amazon SageMaker 🔎1.1 新功能发布:A…

消息通知(Notification)/用户触达系统设计

近年来,通知功能已经成为许多应用程序中突出的特性。构建一个能每天发送数百万通知的可扩展系统绝非易事。这正是为什么我觉得有必要记录我在这方面踩坑之路。也叫用户触达系统。 完成这项任务要求对通知生态系统有深刻的理解,否则需求很容易变得模糊和…

系列十五、Redis面试题集锦

一、Redis面试题集锦 1.1、Redis到底是单线程还是多线程 Redis6.0版本之前的单线程指的是其网络IO和键值对读写是由一个线程完成的; Redis6.0引入的多线程指的是网络请求过程采用了多线程,而键值对读写命令仍然是单线程的,所以多线程环境下&…

MITO-ID®线粒体膜电位检测试剂盒

线粒体膜电位(Mitochondrial Membrane Potential,MMP)是判定细胞健康程度、线粒体膜通透性和细胞凋亡的一个重要指标,MMP的丧失通常与细胞凋亡的早期阶段有关。评估线粒体功能状态的基于细胞的检测方法正在成为阐明线粒体活动在药物诱导毒性、…

记录Oracle Exadata X8M-2 存储服务器告警灯亮的处理过程(/SYS/MB/P0PCIE7)

文章目录 概要调查流程处理方式: 概要 现场服务器告警灯亮,其他服务器正常,磁盘灯正常,所以从整体来看应是内部部件抛出的异常问题,需要登录机器确认: 调查流程 通过ILOM web界面查看服务器状态进行信息…

Java代码实现简易版王者荣耀

一.主窗口类 package com.sxt;import com.sxt.beast.Beast;import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import java.io.File; import java.util.Arra…

拓展 Amazon S3 技术边界:Amazon S3 Express One Zone 的创新之路

授权说明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 亚马逊云科技开发者社区, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道 自 Amazon S3 服务推出以来,一直是全球各行各业数百万客…

Linux基本开发工具

编译器和自动化构建工具 一、编译器——gcc、g1. 安装 gcc/g2. 使用3. 链接库4. 拓展命令:od/file/ldd/readelf 二、自动化构建项目——make、makefile1. 介绍2. 使用例子touch——change file timestampsstat——display file or file system status修改时间 .PHON…

SpringBoot2—开发实用篇1

目录 热部署 手动启动热部署 自动启动热部署 热部署范围配置 关闭热部署 配置高级 测试 热部署 什么是热部署?简单说就是你程序改了,现在要重新启动服务器,嫌麻烦?不用重启,服务器会自己悄悄的把更新后的程序给…

大模型时代-怎么正确的开发和使用AI模型

一、背景 大模型的概念已经经过了一年的发酵,大家也渐渐的冷静下来了。一开始大家很兴奋,感觉新的时代要来了,然后就是疯狂,再就是都各自找各自公司的东西怎么与大模型沾点边,要不然今年玩不下去了,就要落伍…

数据结构和算法 - 数组

1、数组 1.1 简介 什么是数组? 他优缺点是什么?具体应用有哪些? 「数组 array」是一种基于顺序存储的线性数据结构,其将相同类型的元素存储在连续的内存空间中。我们将元素在数组中的位置称为该元素的「索引 index」。 如图&…

生产问题排查思路

生产上有用户反映,登录之后页面信息加载不出来,请求响应时间慢等。 下图为生产上一个请求在网关上面的流程: 因为我们生产上,有一张异常信息记录表,第一时间查询了上面是否有最近的异常记录。发现了一点,是…

vue整个页面可以拖拽导入文件

效果图 原理与源码 我们这里的思路是用ant组件库的upload组件,就是如下这个 用这个包裹住所有页面,你可以是包裹住App.vue,或者是你的homepage。但是这个涉及到一个问题,就是我们现在确实是可以拖拽导进来文件了,但是…

【Stm32-F407】Keil uVision5 下新建工程

①双击鼠标左键打开Keil uVision5,选择 Project 下的 New uVision Project ; ②在期望的文件夹下创建一个工程,并按如下要求操作; ③添加文件类型,按如下要求操作 ④如有需要可添加相关启动文件在工程文件夹下并添加到…