将表格数据导出 Excel 格式的数据方法(2)

news/2024/7/21 5:40:33 标签: excel, 前端, javascript

1、在工具类中创建一个脚本文件

javascript">/**
 * @param {*} tableValueData
 *      表格数据: []
 * @param {*} tableTitleData
 *      表格标题数据: ["", "", "", ""]
 * @param {*} fileName
 *      文件名
 * @param {*} tableHeader
 *      表格名
 */

// 引入插件
import XLSXS from "xlsx-js-style";
// 暴露方法
export function exportExcel(tableValueData, tableTitleData, fileName, tableHeader) {
  const header = [];
  const body = [];
  let strMaxNum = {};
  tableValueData.forEach((e, i) => {
    let styleArr = [];
    e.forEach((ele, ei) => {
      if (!ele) ele = 0;
      let styleObj = {
        v: ele,
        t: "s",
        s: {
          alignment: {
            vertical: "center",
            horizontal: "center",
          },
          border: {
            top: { style: "thin" },
            left: { style: "thin" },
            bottom: { style: "thin" },
            right: { style: "thin" },
          },
        },
      };
      styleArr.push(styleObj);
      strMaxNum[ei] = strMaxNum[ei]
        ? strMaxNum[ei] > ele.toString().length
          ? strMaxNum[ei]
          : ele.toString().length
        : ele.toString().length;
    });
    body.push(styleArr);
  });
  let cols = [];
  let title1 = [];
  tableTitleData.forEach((item, index) => {
    let obj = {
      v: item,
      t: "s",
      s: {
        alignment: {
          vertical: "center",
          horizontal: "center",
        },
        border: {
          top: { style: "thin" },
          left: { style: "thin" },
          bottom: { style: "thin" },
          right: { style: "thin" },
        },
      },
    };
    title1.push(obj);
    let resultMaxNum = Number(item.length) > strMaxNum[index] ? Number(item.length) : strMaxNum[index];
    let colsObj = { wch: resultMaxNum * 2 + 5 };
    cols.push(colsObj);
    // 设置标题
    if (index == 0) {
      header.push({
        v: tableHeader,
        t: "s",
        s: {
          font: {
            bold: true,
            sz: 14,
            name: "宋体",
          },
          alignment: {
            vertical: "center",
            horizontal: "center",
          },
          border: {
            top: { style: "thin" },
            left: { style: "thin" },
            bottom: { style: "thin" },
            right: { style: "thin" },
          },
        },
      });
    } else {
      header.push({
        v: '',
        t: "s",
        s: {
          font: {
            bold: true,
            sz: 14,
            name: "宋体",
          },
          alignment: {
            vertical: "center",
            horizontal: "center",
          },
          border: {
            top: { style: "thin" },
            left: { style: "thin" },
            bottom: { style: "thin" },
            right: { style: "thin" },
          },
        },
      });
    }
  });
  body.unshift(title1);
  body.unshift(header);
  const sheet = XLSXS.utils.aoa_to_sheet(body);

  sheet["!cols"] = cols;
  const rows = [{ hpx: 20 }, { hpx: 16 }, { hpx: 18 }];
  sheet["!rows"] = rows;

  let mergeNum = tableTitleData.length - 1;
  const merges = [{ s: { r: 0, c: 0 }, e: { r: 0, c: mergeNum } }];
  sheet["!merges"] = merges; // 将merges添加到sheet中

  // 导出Excel文件
  const workbook = XLSXS.utils.book_new(); // 创建虚拟的 workbook
  XLSXS.utils.book_append_sheet(workbook, sheet, tableHeader); // 向 workbook 中添加 sheet
  XLSXS.writeFile(workbook, `${fileName}.xlsx`); // 导出 workbook
}

2、在需要的地方引入使用

javascript">exportExcel(arr1,arr2,var1,var2)

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

相关文章

Android 图形渲染和显示系统关系

SurfaceFlinger:作为 Android 系统中的一个系统服务,SurfaceFlinger 负责管理整个屏幕的渲染和合成工作。它管理和合成多个 Surface,并与硬件加速器以及 Hardware Composer (HWC) 进行交互,最终将图像数据发送给显示硬件进行显示。…

JAVA安全(偏基础)

SQL注入 SQLI(SQL Injection), SQL注入是因为程序未能正确对用户的输入进行检查,将用户的输入以拼接的方式带入SQL语句,导致了SQL注入的产生。攻击者可通过SQL注入直接获取数据库信息,造成信息泄漏。 JDBC JDBC有两个方法获取s…

Java并发编程:第五章 原子类(Atomic)

文章目录 一、基本类型类1、使用场景2、AtomicBoolean3、AtomicInteger4、AtomicLong 二、数组1、使用场景2、AtomicIntegerArray3、AtomicLongArray4、AtomicReferenceArray 三、引用类型1、使用场景2、AtomicReference3、AtomicReferenceFieldUpdater4、AtomicMarkableRefere…

使用easyexcel生成动态头,实时生成头写入,加对应的列

测试类 参考链接:动态头,实时生成头写入 package org.springblade.modules.api.controller;import com.alibaba.excel.EasyExcel; import com.alibaba.excel.metadata.Sheet; import com.alibaba.excel.write.metadata.style.WriteCellStyle; import c…

【原创】RockyLinux8.6编译安装Redis7.2.4,非常详细!

前言 RockyLinux8.6貌似比CentOS7.9少了一些必要的库,还有就是存在版本冲突,导致它去编译Redis7.2.4比CentOS7.9麻烦多了,踩了好多坑,终于算是编译成功了,下面就来介绍一下如何编译成功的 上传源码包 首先去Redis官…

elk7.11.2离线安装

elk与jdk自行搜索下载 package(离线安装包)目录:/home/elk-pak /home/jdk8-pak 安装目录:/usr/local/ jdk8安装 最好查看一下是否存在原服务器自带openJDK rpm -qa|grep java # 有就执行下边卸载命令 无拉倒 rpm -e --nodeps jdk-xxx# 解压jdk8安装包…

力扣日记3.21【贪心算法篇】45. 跳跃游戏 II

力扣日记:【贪心算法篇】45. 跳跃游戏 II 日期:2024.3.21 参考:代码随想录、力扣 45. 跳跃游戏 II 题目描述 难度:中等 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转…

STM32关于使用定时器触发ADC转换的理解

以STM32 ADC的常规通道为例(注入通道类似): 如上图,STM32 ADC的常规通道可以由以上6个信号触发任何一个,我们以使用TIM2_CH2触发ADC1,独立模式,每次仅测一条通道,则ADC的配置如下&am…