导出的使用

news2025/3/19 6:00:56

在web开发中,导出是很常见的一个功能,当我进行个人项目练习的时候,导出的时候无法控制列宽以及居中样式,后续发现导出插件无法进行修改,整个插件较为简便易懂的同时,对于EX的控制较为简陋,很多东西并不能设置,根据我的搜索,更改为ExcelJS插件来控制样式以及列宽,截止于现在,我们可以通过引用

  <script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>

来获得对应的方法进行使用

在实现导出功能之前,我们需要对一些配置进行初始化。下面是配置对象的内容,其中包括了导出字段、表头映射、状态映射和样式配置等:

// 导出配置
const exportConfig = {
  // 选择导出的字段路径
  selectedHeaders: [
    "id",
    "user.nickname",
    "card",
    "tel",
    "depart.name",
    "doctor_name",
    "money",
    "status",
    "visit_status",
    "order_code",
    "create_time",
    "yes_time",
  ],

  // 表头映射关系
  customHeaders: {
    id: "订单ID",
    "user.nickname": "就诊人",
    card: "就诊卡号",
    tel: "手机号",
    "depart.name": "挂号科室",
    doctor_name: "医生姓名",
    money: "支付金额",
    status: "缴费状态",
    visit_status: "就诊状态",
    order_code: "订单号",
    create_time: "创建时间",
    yes_time: "最后缴费时间",
  },

  // 状态映射配置
  statusMappings: {
    status: {
      2: "欠费",
      1: "缴费完成",
      null: "未知",
      undefined: "未知",
    },
    visit_status: {
      2: "就诊中",
      1: "就诊完成",
      null: "未知",
      undefined: "未知",
    },
  },

  // 样式配置
  columnWidth: 18,
  styles: {
    header: {
      fill: {
        type: "pattern",
        pattern: "solid",
        fgColor: { argb: "FFD3D3D3" },
      },
      font: {
        bold: true,
        name: "微软雅黑",
        size: 12,
      },
      alignment: {
        vertical: "middle",
        horizontal: "center",
      },
    },
    body: {
      font: {
        name: "微软雅黑",
        size: 11,
      },
      alignment: {
        vertical: "middle",
        horizontal: "center",
      },
    },
  },
};
  • selectedHeaders: 这是一个包含了需要导出的字段路径的数组。每个路径指向数据对象中的一个字段,可以是嵌套的字段(例如:"user.nickname")。
  • customHeaders: 这是字段的映射,用于将字段路径映射到Excel表格中的实际表头名称。
  • statusMappings: 配置字段状态的映射,如"缴费状态"和"就诊状态"的数值映射为具体的状态描述。
  • styles: 设置Excel表格的样式,如字体、对齐方式、填充色等。

工具函数

为了从数据源中提取嵌套值,我们编写了以下工具函数:

getNestedValue

该函数用于从对象中根据路径提取嵌套的值:

function getNestedValue(obj, path) {
  return path.split(".").reduce((acc, key) => {
    if (acc === null || acc === undefined) return undefined;
    return acc[key];
  }, obj);
}

formatDate

该函数将时间戳转换为易读的日期格式:

数据处理与Excel生成

在数据导出的核心函数exportData中,我们首先对数据源进行有效性检查和预处理。数据的每一项都会通过配置进行映射和处理,特别是数字格式、日期格式和状态映射。

async function exportData(dataSource) {
  try {
    if (!dataSource || !Array.isArray(dataSource)) {
      throw new Error("无效的数据源");
    }
    if (dataSource.length === 0) {
      showAlerts(".ErrorModal", "5%", "警告:没有可导出的数据");
      return;
    }

    const processedData = dataSource.map((item) => {
      const rowData = {};
      exportConfig.selectedHeaders.forEach((fieldPath) => {
        const displayName = exportConfig.customHeaders[fieldPath];
        let rawValue = getNestedValue(item, fieldPath);

        // 状态映射处理
        if (exportConfig.statusMappings[fieldPath]) {
          rawValue =
            exportConfig.statusMappings[fieldPath][rawValue] ?? "未知状态";
        }

        // 特殊字段处理
        if (fieldPath === "money") {
          const numericString = String(rawValue).replace(/[^0-9.]/g, "");
          const numericValue = parseFloat(numericString);
          if (!isNaN(numericValue) && isFinite(numericValue)) {
            rawValue = numericValue;
          } else {
            rawValue = "金额异常";
            showAlerts(".ErrorModal", "5%", "金额异常");
          }
        }

        if (["create_time", "yes_time"].includes(fieldPath)) {
          rawValue = formatDate(rawValue);
        }

        // 默认空值处理
        if ([null, undefined, ""].includes(rawValue)) {
          rawValue = fieldPath.includes("time") ? "时间未记录" : "未知";
        }

        rowData[displayName] = rawValue;
      });

      return rowData;
    });

    // 创建Excel工作簿
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet("门诊缴费记录", {
      properties: { tabColor: { argb: "FF00FF00" } },
    });

    // 添加表头
    const headers = Object.values(exportConfig.customHeaders);
    const headerRow = worksheet.addRow(headers);
    headerRow.eachCell((cell) => {
      cell.style = exportConfig.styles.header;
    });

    // 添加数据行
    processedData.forEach((dataItem) => {
      const rowValues = headers.map((header) => dataItem[header]);
      const dataRow = worksheet.addRow(rowValues);
      dataRow.eachCell((cell) => {
        cell.style = exportConfig.styles.body;
      });
    });

    // 设置列宽
    worksheet.columns = headers.map(() => ({
      width: 20,
      style: { numFmt: "@" },
    }));

    // 生成文件
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });

    const downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = `门诊缴费记录_${new Date().toISOString().slice(0, 10)}_${hours}:${minutes}:${seconds}.xlsx`;
    document.body.appendChild(downloadLink);
    downloadLink.click();

    // 清理资源
    setTimeout(() => {
      URL.revokeObjectURL(downloadLink.href);
      downloadLink.remove();
    }, 1000);
  } catch (error) {
    console.error("导出过程中发生错误:", error);
    alert(`导出失败: ${error.message}`);
  }
}

核心步骤

  1. 数据预处理: 根据配置映射数据字段,并处理特殊字段(如金额、日期等)。
  2. Excel生成: 使用ExcelJS创建工作簿,并设置表头和数据行的样式。
  3. 导出功能: 生成Excel文件并通过Blob触发下载。

用户交互与事件处理

在页面交互中,我们提供了全选、反选和导出选中项/全部数据的功能。用户可以根据需求选择需要导出的数据,或选择导出全部数据。

事件处理代码

$(document).ready(function () {
  $(".select-all").on("change", function () {
    $(".row-checkbox").prop("checked", this.checked);
  });

  $(".choice_export").on("click", async function () {
    const selectedIndexes = $(".notice .checkbox_id input:checked")
      .map(function () {
        return $(this).attr("dataIndex");
      })
      .get();

    if (selectedIndexes.length === 0) {
      showAlerts(".ErrorModal", "5%", "请至少选择一条有效记录");
      return;
    }

    try {
      const selectedData = globalData.filter((item) =>
        selectedIndexes.includes(item.id.toString())
      );
      await exportData(selectedData);
      showAlerts(".correctModal", "5%", `成功导出 ${selectedData.length} 条数据`, "success");
    } catch (error) {
      showAlerts(".ErrorModal", "5%", `导出失败: ${error.message}`, "error");
    }
  });

  $(".all_export").on("click", async function () {
    if (!globalData || globalData.length === 0) {
      showAlerts(".ErrorModal", "5%", "当前没有可导出的数据");
      return;
    }

    try {
      await exportData(globalData);
      showAlerts(".correctModal", "5%", "成功导出全部数据");
    } catch (error) {
      showAlerts(".ErrorModal", "5%", `导出失败: ${error.message}`, "error");
    }
  });
});

本文介绍了如何使用ExcelJS库进行数据导出,涵盖了如何处理数据映射、设置自定义表头、实现状态映射、格式化日期和金额、以及如何生成和下载Excel文件。通过这些步骤,你可以轻松实现复杂的Excel导出功能,并根据不同的业务需求进行调整和扩展。

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

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

相关文章

博客图床 VsCode + PigGo + 阿里云OSS

关键字 写博客&#xff0c;图床&#xff0c;VsCode&#xff0c;PigGo&#xff0c;阿里云OSS 背景环境 我想把我在本地写的markdown文档直接搬到CSDN上和博客园上&#xff0c;但是图片上传遇到了问题。我需要手动到不同平台上传文件&#xff0c;非常耗费时间和经历。 为了解决…

C++之list类及模拟实现

目录 list的介绍 list的模拟实现 定义节点 有关遍历的重载运算符 list的操作实现 &#xff08;1&#xff09;构造函数 (2)拷贝构造函数 &#xff08;3&#xff09;赋值运算符重载函数 &#xff08;4&#xff09;析构函数和clear成员函数 &#xff08;5&#xff09;尾…

SwinTransformer 改进:添加DoubleAttention模块提升上下文语义提取能力

目录 1. DoubleAttention模块 2. SwinTransformer + DoubleAttention 3. 完整代码 Tips:融入模块后的网络经过测试,可以直接使用,设置好输入和输出的图片维度即可 1. DoubleAttention模块 DoubleAttention 是一种用于计算机视觉任务的注意力机制,旨在通过双重注意力机制…

MacBook部署达梦V8手记

背景 使用Java SpringBootDM开发Web应用&#xff0c;框架有License&#xff0c;OSX加载dll失败&#xff0c;安装了Windows 11&#xff0c;只有一个C盘&#xff0c;达梦安装后因为C盘权限问题&#xff0c;创建数据库失败&#xff0c;遂采用Docker容器方式部署。 下载介质 官网在…

外贸 B2B 平台没落?多语言批发系统正在崛起

近年来&#xff0c;全球外贸行业正在发生快速变化&#xff0c;传统的 B2B 平台正面临越来越多的挑战&#xff0c;尤其是在面对新兴的多语言批发系统时。这种变化不仅影响了供应商和买家之间的交易方式&#xff0c;也正在推动外贸行业的数字化升级和转型。今天&#xff0c;让我们…

[spring] Spring JPA - Hibernate 多表联查 1

[spring] Spring JPA - Hibernate 多表联查 之前在 [spring] spring jpa - hibernate 名词解释&配置 和 [spring] spring jpa - hibernate CRUD 简单的学习了一下怎么使用 Hibernate 实现 CRUD 操作&#xff0c;不过涉及到的部分都是逻辑上比较简单的实现——只在一张表上…

鸿蒙Next开发实战教程—电影app

最近忙忙活活写了不少教程&#xff0c;但是总感觉千篇一律&#xff0c;没什么意思&#xff0c;大家如果有感兴趣的项目可以私信给幽蓝君写一写。 今天分享一个电影App。 这个项目也比较简单&#xff0c;主要是一些简单页面的开发和本地视频的播放以及横竖屏切换。 页面搭建以…

停车场停车位数据集,标注停车位上是否有车,平均正确识别率99.5%,支持yolov5-11, coco json,darknet,xml格式标注

停车场停车位数据集&#xff0c;标注停车位上是否有车&#xff0c;平均正确识别率98.0&#xff05;&#xff0c;支持yolov5-11&#xff0c; coco json&#xff0c;darknet&#xff0c;xml格式标注 数据集-识别停车场所有车辆的数据集 数据集分割 一共184张图片 训练组 89&am…

ssm框架之mybatis框架讲解

1&#xff0c;Mybatis 1.1 Mybatis概述 1.1.1 Mybatis概念 MyBatis 是一款优秀的持久层框架&#xff0c;用于简化 JDBC 开发 MyBatis 本是 Apache 的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code&#xff0c;并且改名为MyBatis 。2…

CEF 多进程模式时,注入函数,获得交互信息

CEF 控制台添加一函数,枚举 注册的供前端使用的CPP交互函数有哪些-CSDN博客 上篇文章,是在模拟环境,单进程中设置的,这篇文章,将其改到正常多进程环境中设置。 对应于工程中的 CEF_RENDER项目 一、多进程模式中,改写 修改步骤 1、注入函数 client_app_render.cpp 在…

Androidstudio出现警告warning:意外的元素

这些警告信息通常与 Android SDK 或系统镜像的配置文件有关&#xff0c;可能是由于 SDK 工具或系统镜像的版本不兼容或配置文件格式发生了变化。以下是解决这些警告的步骤&#xff1a; 1. 更新 Android SDK 工具 确保你使用的是最新版本的 Android SDK 工具&#xff1a; 打开…

深入了解Linux —— git三板斧

版本控制器git 为了我们方便管理不同版本的文件&#xff0c;就有了版本控制器&#xff1b; 所谓的版本控制器&#xff0c;就是能够了解到一个文件的历史记录&#xff08;修改记录&#xff09;&#xff1b;简单来说就是记录每一次的改动和版本迭代的一个管理系统&#xff0c;同…

【软件系统架构】单体架构

一、引言 在软件开发的漫长历程中&#xff0c;架构的选择一直是至关重要的决策。单体架构作为一种经典的架构模式&#xff0c;曾经在许多项目中发挥着不可替代的作用。虽然如今微服务等架构逐渐流行&#xff0c;但理解单体架构对于深入掌握软件架构体系仍然有着重要意义。 二、…

【求助】【建议放弃】【谷粒商城版】Kubernetes

本文作者&#xff1a; slience_me 文章目录 Kubernetes【谷粒商城版】【建议放弃】1. docker安装2. kubernetes安装前3. kubeadm,kubelet,kubectl3.1 简介kubeadmkubeletkubectl常用指令 3.2 安装3.3 kubeadm初始化3.4 加入从节点(工作节点)3.5 安装Pod网络插件&#xff08;CNI…

C# Unity 唐老狮 No.10 模拟面试题

本文章不作任何商业用途 仅作学习与交流 安利唐老狮与其他老师合作的网站,内有大量免费资源和优质付费资源,我入门就是看唐老师的课程 打好坚实的基础非常非常重要: Unity课程 - 游习堂 - 唐老狮创立的游戏开发在线学习平台 - Powered By EduSoho C# 1. 内存中&#xff0c;堆和…

第十五届蓝桥杯2024JavaB组省赛试题A:报数游戏

简单的找规律题目。题目给得数列&#xff0c;第奇数项是20的倍数&#xff0c;第偶数项时24的倍数。题目要求第n 202420242024 项是多少。这一项是偶数&#xff0c;所以答案一定是24的倍数&#xff0c;并且偶数项的个数和奇数项的个数各占一半&#xff0c;所以最终的答案ans( n…

Matlab 汽车二自由度转弯模型

1、内容简介 Matlab 187-汽车二自由度转弯模型 可以交流、咨询、答疑 2、内容说明 略 摘 要 本文前一部分提出了侧偏角和横摆角速度作为参数。描述了车辆运动的运动状态&#xff0c;其中文中使用的参考模型是二自由度汽车模型。汽车速度被认为是建立基于H.B.Pacejka的轮胎模…

学c++的人可以几天速通python?

学了俩天啊&#xff0c;文章写纸上了 还是蛮有趣的

Rocky Linux 9.x 基于 kubeadm部署k8s 1.32

一、部署说明 1、主机操作系统说明 序号操作系统及版本备注1Rocky Linux release 9下载链接&#xff1a;https://mirrors.163.com/rocky/9.5/isos/x86_64/Rocky-9.5-x86_64-minimal.iso 2、主机硬件配置说明 作用IP地址操作系统配置关键组件k8s-master01192.168.234.51Rocky…

解决git init 命令不显示.git

首先在自己的项目代码右击 打开git bash here 输入git init 之后自己的项目没有.git文件&#xff0c;有可能是因为.git文件隐藏了&#xff0c;下面是解决办法