前端使用XLSX导出excel表格

news2024/9/20 15:05:38

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/1304464.html

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

相关文章

MySQL数据恢复之binlog2sql的安装和使用,很详细

MySQL数据恢复之binlog2sql的安装和使用,很详细 一、前言二、binlog2sql的介绍三、安装binlog2sql1、安装git(已安装可以跳过)(1)、正常安装(2)、编译安装报错①、安装libcurl (2&am…

Win11专业版,eNSP启动失败,错误代码40 解决方法

微软Win11系统默认开启的 Virtualization-based Security (VBS)“基于虚拟化的安全性”会导致游戏、跑分性能下降。VBS 基于虚拟化的安全性,通常称为内核隔离。使用硬件虚拟化在内存中创建安全区域,为其他安全功能提供了一个安全平…

DNSLog漏洞探测(五)之XXE漏洞实战

DNSLog漏洞探测(五)之XXE漏洞实战 本文我们来学习如何利用DNSLog平台探测目标网站是否存在RCE漏洞,接下来我们还是利用Pikachu的靶场作为演示。首先我们先进入Pikachu靶场的XXE漏洞界面。 如果此时网站的界面存在着无回显的XXE漏洞,这种情况下&#xff…

JMeter直连数据库

JMeter直连数据库 使用场景操作步骤 使用场景 用作请求的参数化 登录时需要的用户名,密码可以从数据库中查询获取 用作结果的断言 添加购物车下订单,检查接口返回的订单号,是否与数据库中生成的订单号一致 清理垃圾数据 添加商品后&#xff…

美团P3-2大佬写给初中级前端的《高级进阶面试指南》

都说金9银10,节前自己也去面试了几家公司,幸而都收到了offer。如今已经入职美团两月有余,最近闲来有空,整理一番,希望对各位找工作有帮助。 说在前面,我的答案仅供参考。答案有不全或有偏颇之处&#xff0…

Linux 搭建 gitlab

目录 前言安装依赖项添加GitLab存储库安装GitLab CE创建新存储目录编辑GitLab配置文件,例如更改默认域名或端口:重新配置并启动GitLab服务以应用更改:前言 centos搭建gitlab代码仓库 安装依赖项 在安装GitLab之前,您需要先安装一些必要的依赖项: yum install -y curl …

Clique expension和star expension

Clique expension(团扩展),也叫连通分量扩展。 其含义是:将超边中所有顶点都连接在一起,比如有3个顶点的超边,扩展成普通图时两两相连就会有3条边。以此类推。连接和n个顶点的超边拓展后有条边。同一个超边…

keil生成bin文件(通用型)

有些时候需要在keil里面生成bin文件,但找到的各种方式五花八门,特别是要填写文件路径等没有通用性,搞个不同的工程就得改下,找到这个跟路径无关的代码,进行记录下。 首先还是点开keil的设置: 按照上面的图…

前沿技术|张磊:RR22 Blazing Fast PSI 实现介绍

“隐语”是开源的可信隐私计算框架,内置 MPC、TEE、同态等多种密态计算虚拟设备供灵活选择,提供丰富的联邦学习算法和差分隐私机制 开源项目 github.com/secretflow gitee.com/secretflow ​ 11月25日,「隐语开源社区 Meetup西安站」顺利举…

node 版本管理与镜像源

工作中使用node,不同的前端项目可能依赖不同的版本,就需要对node进行版本管理,我们可以使用n来进行node版本的管理,而且n也可以用于安装指定版本的node。 在安装n之前,我们先来确定一下我们的npm是否配置有国内镜像源…

当 Sealos 遇上区块链

当 Sealos 遇上区块链 拿着区块链技术不一定是去发币,很多业务系统也适合用这些技术,比如做个统一支付系统,积分系统等,可以做为一家公司的金融基础设施,或支付中台。拿链的技术去做有很多好处: 高可用&a…

linux(5):linux基础命令第五弹

在linux基础命令第四弹中http://t.csdnimg.cn/tvuNl我们了解了echo、tail命令、管道符和vim文本编辑器的相关内容。这一篇我们会了解关于命令选项的说明 我们在之前的学习中,发现命令中的选项是非常多的,比如-l -c -m -r -w 等等,命令有很多&…

BH1750光照传感器——STM32驱动

———————实验效果——————— 🎄硬件外观 🎄 接线 🎈 VCC接 3.3V 🎈 GND接 GND 🎈 SCL接 PB2 🎈 SDA接PB3 🎈 ADDR 悬空不接 🎄 代码获取 🎈 查看下方 —…

『App自动化测试之Appium基础篇』| Desired Capabilities详解与使用

App自动化测试之Appium基础篇』| Desired Capabilities详解与使用 1 关于appium driver2 安装appium driver3 安装Appium Python Client4 安装测试对象5 获取测试对象信息5.1 使用dumpsys5.2 使用AndroidKiller5.3 使用aapt 6 Capabilities详解6.1 Capabilities介绍6.2 automat…

【VTK】VTK中的光标样式

很高兴在雪易的CSDN遇见你 前言 本文分享VTK中的光标设置相关内容技术,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U&#…

DNSLog漏洞探测(六)之SSRF漏洞实战

DNSLog漏洞探测(六)之SSRF漏洞实战 本文我们来学习如何利用DNSLog平台探测目标网站是否存在SSRF漏洞,接下来我们还是利用Pikachu的靶场作为演示。首先我们先进入Pikachu靶场的SSRF漏洞界面。SSRF漏洞更多的可以称之为服务端的请求伪造。 像是原本探测漏洞的手段&am…

契约锁电子签章让合同起草、审查不再难

起草、审查合同是签约过程中最繁琐的环节之一。 小到筛选合同范本、确认并填写签署方信息、计算工资、服务费用或产品价格,大到合同条款审查、修改…总之想要呈现一份合规、双方满意的合同文书常常消耗大量时间和精力,事倍功半。 销售刚刚和客户确认订单…

二百一十四、Linux——Linux系统时间比电脑时间慢5分钟

一、目的 服务器重启后,发现Linux的系统时间比电脑时间慢5分钟,于是看了些博客,终于找到了解决方法,记录一下,以防止后面出现同样的问题 二、问题 通过date查看,Linux系统时间比电脑时间慢5分钟 &#…

源码级详解Spring的三级缓存,循环依赖的处理流程

一.什么是三级缓存 1.一级缓存:存放已经初始化完成的Bean 2.二级缓存:存放半成品Bean,既实例化完成未初始化的Bean。 3.三级缓存:存放bean工厂 二.为什么是三级缓存 一级缓存是必须的,这个我们没有什么疑问。那为…

等保2.0的变化

1法律地位得到确认 《中华人民共和国网络安全法》第21条规定“国家实行网络安全等级保护制度”,要求“网络运营者应当按照网络安全等级保护制度要求,履行安全保护义务”;第31条规定“对于国家关键信息基础设施,在网络安全等级保护…