纯前端使用XLSX导出excel表格

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);
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

全志V3s之U-Boot

1、安装交叉编译器: ARM交叉编译器的官网:交叉编译器 a、使用wget下载: wget https://releases.linaro.org/components/toolchain/binaries/latest/arm-linux-gnueabihf/gcc-linaro-6.3.1-2017.05-x86_64_arm-linux-gnueabihf.tar.xzb、解…

数据结构从入门到入土——初识泛型

目录 一,包装类 1.基本数据类型和对应的包装类 2.装箱和拆箱 3.自动装箱和自动拆箱 二,什么是泛型? 三,引出泛型 语法 四,泛型类的使用 1.语法 2.类型推导(Type Inference) 五,裸类型(Raw Type) …

Mybatis的foreach标签的使用以及参数的含义

Mybatis的foreach标签的使用以及参数的含义 语法格式: 属性说明: collection属性的注意点:

【UE5.1】套用小白人蓝图,让玩家控制MetaHuman移动

效果 步骤 1. 新建一个工程,创建Basic关卡,添加第三人称游戏资源到内容浏览器 2. 打开Quixel Bridge 选择高质量,然后添加创建好的MetaHuman到内容浏览器 启用所有缺失 立即重启 添加完毕后内容浏览器会多出“MetaGumans”文件夹&#xff0…

字符处理 C语言xdoj52

问题描述 从键盘输入一个字符,若为小写字母,则输出其对应的大写字母;若为大写字母,则输出对应的小写字母;其他字符原样输出。 输入说明 输入一个字符 输出说明 输出一个字符 输入样例 样例1输入 a 样例…

再回首感知损失在low-level上的应用

《Perceptual Losses for Real-Time Style Transfer and Super-Resolution》是李飞飞团队在2016年发表于ECCV的文章。我近几年的工作中,所训练的模型都离不开感知损失。不得不感慨,大佬之所以是大佬,就是因为他们开创性的工作很多年后依然为人…

生成树基本实验

背景 某公司的二层交换网络中,为了提高网络可靠性,故在二层交换网络中增加冗余链路。为了阻 止冗余链路可能带来的广播风暴,MAC地址漂移等负面影响,需要在交换机之间部署生成树 协议。 实验 一.配置stp en 开启 stp en stp …

2021实战面试

1、Rem , em , px , % , vw 之间的区别 PX: px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em: 1,子元素字体大小的em是相对于父元素字体大小 2,元素的width/height/padding/margin用em的话是相对于该元素的font-size rem:1rem是…

计算机毕业设计 SpringBoot的供应商管理系统 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…

Kafka-集群架构设计

Kafka的Zookeeper元数据梳理 zookeeper整体数据 Kafka将状态信息保存在Zookeeper中,这些状态信息记录了每个Kafka的Broker服务与另外的Broker服务 有什么不同。通过这些差异化的功能,共同体现出集群化的业务能力。这些数据,需要在集群中各个…

道路清障车行业分析:中国市场发展趋势研究

清障车全名为道路清障车,又称拖车、道路救援车、拖拽车,具有起吊、拽拉和托举牵引等多项功能,清障车主要用于道路故障车辆,城市违章车辆及抢险救援等。清障车按类别主要分为:拖吊连体型、拖吊分离型,一拖一…

leetcode---904. 水果成篮 -- 【滑动窗口/c++】

原题:904. 水果成篮 - 力扣(LeetCode) 题目解析: 本题中的fruit数组中的元素表示的是数的种类。如示例1,fruit【1,2,1】就表示下标0处有1号类型的树,下标1处有2号类型的树,下标2处有1号类型的…

智能优化算法应用:基于狮群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于狮群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于狮群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.狮群算法4.实验参数设定5.算法结果6.参考文献7.MA…

TSINGSEE青犀基于EasyCVR与AI技术的高校实验室视频可视化监管方案

一、行业背景 实验室作为科研、教学过程中的一个重要场所,其管理也十分至关重要。尤其是高校实验室安全问题,教育部《高等学校实验室安全规范》中说明,需要进一步加强高校实验室的安全管理工作,实现规范化、常态化的管理体制&…

C++ Qt开发:如何使用信号与槽

在Qt中,信号与槽(Signal and Slot)是一种用于对象之间通信的机制。是Qt框架引以为傲的一项机制,它带来了许多优势,使得Qt成为一个强大且灵活的开发框架之一。信号与槽的关联通过QObject::connect函数完成。这样的机制使…

【Linux】:线程(二)互斥

互斥与同步 一.线程的局部存储二.线程的分离三.互斥1.一些概念2.上锁3.锁的原理4.死锁 一.线程的局部存储 例子 可以看到全局变量是所有线程共享的,如果我们想要每个线程都单独访问g_val怎么办呢?其实我们可以在它前面加上__thread修饰。 这就相当于把g…

leetcode -- 209 长度最小的子数组[滑动窗口/c++]

原题链接:209. 长度最小的子数组 - 力扣(LeetCode) 算法原理: 滑动窗口其实就是同向双指针,因为计算结果的单调性,在符合条件的情况下,左右指针不必往回回溯,而实现优化的效果。 滑…

Python type函数:动态创建类

之前学习过使用 type() 函数可以查看变量的类型&#xff0c;但如果想使用 type() 直接查看某个类的类型呢&#xff1f;看如下程序&#xff1a; class Role:pass r Role() # 查看变量r的类型 print(type(r)) # <class __main__.Role> # 查看Role类本身的类型 print(type(…

SpringBoot之数组,集合,日期参数的详细解析

1.4 数组集合参数 数组集合参数的使用场景&#xff1a;在HTML的表单中&#xff0c;有一个表单项是支持多选的(复选框)&#xff0c;可以提交选择的多个值。 多个值是怎么提交的呢&#xff1f;其实多个值也是一个一个的提交。 后端程序接收上述多个值的方式有两种&#xff1a; 数…

打造绿色计算数智动力 HashData 入选“绿色计算最具价值解决方案”

12月13日-14日&#xff0c;由绿色计算产业联盟(GCC)、边缘计算产业联盟&#xff08;ECC&#xff09;联合举办“2023计算产业生态大会”&#xff08;CIEC 2023&#xff09;在北京举行。作为计算领域的权威会议&#xff0c;本次大会邀请了多位两院院士、众多产业专家&#xff0c;…