纯前端使用XLSX导出excel表格

news/2024/7/21 5:04:32 标签: 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);
    },


http://www.niftyadmin.cn/n/5259313.html

相关文章

mac安装pnpm与使用

1、什么是pnpm? pnpm 全称 performant npm,意思是高性能的 npm。pnpm 由 npm/yarn 衍生而来,解决了 npm/yarn 内部潜在的 bug,极大的优化了性能,扩展了使用场景。被誉为 “最先进的包管理工具”。 2、pnpm特点 速度…

【详解优先级队列(堆)】

目录 堆的概念 堆的性质 堆的存储方式 堆的创建 堆的向下调整 向下过程(以小堆为例) 向下过程(以大堆为例) 建堆的时间复杂度O(n) 堆的插入与删除 堆的插入 向上调整建堆的时间复杂度O(nlogn) 堆的删除 常见习题 常用接口介绍 PriorityQueue的特性 Pri…

C语言实战演练之跳动的爱心C语言版

跳 动 的 爱 心 - LOVE - 完整程序 #include <stdio.h> #include <math.h> #include <windows.h> #include <tchar.h> float f(float x, float y, float z) {float a x * x 9.0f / 4.0f * y * y z * z - 1;return a * a * a - x * x * z * z …

nodejs微信小程序+python+PHP沧州地区空气质量数据分析系统-计算机毕业设计推荐 django

本系统不仅主要实现了注册登录&#xff0c;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;城市区域管理&#xff0c;空气状况管理&#xff0c;空气质量管理&#xff0c;系统管理&#xff0c;数据爬取&#xff0c;大屏分析等功能&#xff0c;通过这些功能基本可…

CleanMyMac X2024(Mac优化清理工具)v4.14.5中文版

CleanMyMac X是一款颇受欢迎的专业清理软件&#xff0c;拥有十多项强大的功能&#xff0c;可以进行系统清理、清空废纸篓、清除大旧型文件、程序卸载、除恶意软件、系统维护等等&#xff0c;并且这款清理软件操作简易&#xff0c;非常好上手&#xff0c;特别适用于那些刚入手苹…

基于java斗车交易系统设计与实现论文

摘 要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息存…

数字化赋能实体经济,凌雄科技发挥DaaS模式提质增效价值

11月中旬&#xff0c;市场监管总局发布了2023年前三季度经营主体数据。其中&#xff0c;前三季度全国新设民营企业总计706.5万户&#xff0c;截至9月底&#xff0c;全国登记在册的民营企业数量超过5200万户&#xff0c;在企业总量中占比高达92.3%。如何帮助民营企业实现高质量发…

【改进YOLOv8】融合可扩张残差(DWR)注意力模块的小麦病害检测系统

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义&#xff1a; 随着计算机视觉技术的快速发展&#xff0c;深度学习在图像识别和目标检测领域取得了巨大的突破。其中&#xff0c;YOLO&#xff08;You Only Look O…