angular xlsx-style,复杂表头样式导出

news2024/12/22 14:04:54

 导出效果如下图所示:

下载xlsx

npm install xlsx

angular.json中引入:

 "node_modules/xlsx/dist/xlsx.full.min.js",
              "src/assets/js/jszip.js",
              "src/assets/js/xlsx.js"

 两个插件地址:

 上传中,等下更新

 typings.d.ts中需要加一下声明

ts代码:

export(){
  var wb = XLSX.utils.table_to_book(document.getElementById("tableDataId"), { sheet: "Sheet JS", raw: true });

    let range = XLSX.utils.decode_range(wb.Sheets['Sheet JS']['!ref']);
    // let borderStyle = {
    //   top: {
    //     style: "thin",
    //     color: { rgb: "000000" }
    //   },
    //   bottom: {
    //     style: "thin",
    //     color: { rgb: "000000" }
    //   },
    //   left: {
    //     style: "thin",
    //     color: { rgb: "000000" }
    //   },
    //   right: {
    //     style: "thin",
    //     color: { rgb: "000000" }
    //   }
    // }
    // wb.Sheets['Sheet JS']['!rows'] = [{ hpx: 150 }, { hpx: 50 }, { hpx: 50 }, { hpx: 50 }, { hpx: 50 }, { hpx: 50 }]
    const numColumns = 100;
    wb.Sheets['Sheet JS']['!cols'] = Array(numColumns).fill({ wpx: 160 });
    wb.Sheets['Sheet JS']["!merges"].forEach((item: any) => {
      if (item.e.r == item.s.r && item.e.c != item.s.c) {
        // 列合并
        let R = item.s.r;
        let countLength = item.e.c - item.s.c;
        for (let i = item.s.c; i <= item.e.c; i++) {
          let cell = { c: i, r: R };
          let cell_ref = XLSX.utils.encode_cell(cell);
          if (!wb.Sheets['Sheet JS'][cell_ref]) {
            wb.Sheets['Sheet JS'][cell_ref] = { t: "s", v: "" };
          }
        }
      } else if (item.e.c == item.s.c && item.e.r != item.s.r) {
        // 行合并
        let C = item.s.c;
        let countLength = item.e.r - item.s.r;
        for (let i = item.s.r; i <= item.e.r; i++) {
          let cell = { c: C, r: i };
          let cell_ref = XLSX.utils.encode_cell(cell);
          if (!wb.Sheets['Sheet JS'][cell_ref]) {
            wb.Sheets['Sheet JS'][cell_ref] = { t: "s", v: "" };
          }
        }
      }
    })
    console.log();
    for (let C = range.s.c; C <= range.e.c; ++C) {
      for (let R = range.s.r; R <= range.e.r; ++R) {
        let cell = { c: C, r: R };
        let cell_ref = XLSX.utils.encode_cell(cell);
        console.log(wb.Sheets['Sheet JS'][cell_ref]);
        wb.Sheets['Sheet JS'][cell_ref].s = {
          alignment: {
            horizontal: 'center', // 水平居中
            vertical: 'center', // 垂直居中
            wrapText: 1, // 文本自动换行
          },
          font: {
            name: "黑体",
            sz: "15",
            bold: true
          },
          // border: borderStyle,
        };
      }
    }

    var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };
    var wbout = XLSXX.write(wb, wopts);// 使用xlsx-style 写入
    saveAs(new Blob([s2ab(wbout)], { type: "" }), this.selectTitle[this.selectTitle.length-1]+".xlsx")

    function s2ab(s: any) {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
}

html:

<table id="tableDataId">
   <tr></tr>
<table>

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

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

相关文章

Android U WMShell动画调用堆栈

本文主要简单介绍WMShell动画调用堆栈 代码环境&#xff1a;repo init -u https://mirrors.tuna.tsinghua.edu.cn/git/AOSP/platform/manifest -b android-14.0.0_r7 Systemserver侧 TAG: at com.android.server.wm.Transition.onTransactionReady(Transition.java:1575) TA…

Centos 设置成中国时区

原因是初始安装的 Centos 系统&#xff0c;时区是UTC&#xff0c;跟中国时间不一样&#xff0c;这样会导致一些问题&#xff0c;例如后面安装一些软件&#xff0c;证书认证失败等问题。 修改时间命令如下 1.首先&#xff0c;使用以下命令安装 tzdata 软件包&#xff08;如果尚…

喜羊羊做Python二级(模拟考试--易错点)

今天距离Python二级考试&#xff0c;还有28天左右。坚持每天做几套试卷&#xff0c;保持记忆和手感。 个人在做题的过程中是先不断练习选择题。当你选择题不达标的时候&#xff0c;系统不会看大题&#xff08;大概是觉得选择题都做的那么差&#xff0c;大题也不会那么好&#…

数据执行保护讲解

数据执行保护&#xff08;Data Execution Prevention&#xff0c;简称DEP&#xff09;操作系统中的一项安全功能&#xff0c;旨在防止恶意代码利用缓冲区溢出漏洞执行。它通过将内存的某些区域标记为不可执行&#xff0c;从而防止从这些区域执行代码。这适用于所有程序&#xf…

05:【江科大stm32】:定时器输出比较功能(PWM)

定时器输出比较功能&#xff08;PWM&#xff09; 1、LED呼吸灯2、PWM驱动舵机3、PWM驱动电机 1、LED呼吸灯 ①PWM.c文件的代码如下&#xff1a; #include "stm32f10x.h" // Device header/*使用定时器TIM2&#xff0c;通过通道CH1(PA0)输出PWM波 …

模型 PMI思考法

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。全面评估&#xff0c;三思而后行。 1 PMI思考法的应用 1.1 个人职业发展中的PMI思考法应用 张华是一位有志于提升自己职业竞争力的职场人士。他正在考虑报名参加一个专业认证课程&#xff0c;以期提…

Windows安装Ora2Pg(迁移表结构,表数据)

版本&#xff1a; windows server 2012 R2 oracle 12 说明&#xff1a; 目前该操作是在安装了oracle的机子上做的。 1、安装perl Strawberry Perl下载地址&#xff1a; Strawberry Perl for Windows - Releases 选择一个合适的版本&#xff0c;下载下来之后只需要选择…

百度广告联盟:抢占流量蓝海,精准营销新引擎

百度广告联盟&#xff1a;抢占流量蓝海&#xff0c;精准营销新引擎 在数字营销时代&#xff0c;争夺消费者的注意力与流量成为品牌竞争的关键。百度广告联盟&#xff0c;作为互联网营销领域的佼佼者&#xff0c;凭借其广泛的平台覆盖、精准的受众定位以及丰厚的合作回报…

水稻病害-目标检测数据集(包括VOC格式、YOLO格式)

水稻病害-目标检测数据集&#xff08;包括VOC格式、YOLO格式 数据集&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1eiygobnVJklOdgyCwb2RVg?pwdvsoc 提取码&#xff1a;vsoc 数据集信息介绍&#xff1a; 共有 2148 张图像和一一对应的标注文件 标注文件格式提供了…

《深入浅出WPF》读书笔记.8路由事件

《深入浅出WPF》读书笔记.8路由事件 背景 路由事件是直接响应事件的变种。直接响应事件&#xff0c;事件触发者和事件响应者必须显示订阅。而路由事件的触发者和事件响应者之间的没有显示订阅&#xff0c;事件触发后&#xff0c;事件响应者安装事件监听器&#xff0c;当事件传…

MySQL EXPLAIN 完全解读

MySQL EXPLAIN 完全解读 一、一个EXPLAIN简单执行二、简单了解2.1. id&#xff1a;查询的标识符。2.2. select_type&#xff1a;查询的类型。2.3. table&#xff1a;输出结果集的表。2.4. type&#xff1a;连接类型&#xff0c;这是MySQL决定如何查找表中行的方法。2.5. possib…

学习之数据库相关概念

数据库相关概念 主流的关系型数据库管理系统&#xff1a;

HIVE 数据仓库工具之第一部分(讲解部署)

HIVE 数据仓库工具 一、Hive 概述1.1 Hive 是什么1.2 Hive 产生的背景1.3 Hive 优缺点1.3.1 Hive的优点1.3.2 Hive 的缺点 1.4 Hive在Hadoop生态系统中的位置1.5 Hive 和 Hadoop的关心 二、Hive 原理及架构2.1 Hive 的设计原理2.2 Hive 特点2.3 Hive的体现结构2.4 Hive的运行机…

数据集的使用

一、 Transform与dataset数据集的使用 import torchvisionfrom torch.utils.tensorboard import SummaryWriterdataset_transform torchvision.transforms.Compose([torchvision.transforms.ToTensor()])train_set torchvision.datasets.CIFAR10(root "./dataset"…

《中文Python穿云箭量化平台二次开发技术03》利用Tkinter高级模块设计自己策略代码编辑器及策略运行窗口

《中文Python穿云箭量化平台》是纯Python开发的量化平台&#xff0c;因此其中很多Python模块&#xff0c;我们可以自己设计新的量化工具&#xff0c;例如自己新的行情软件、新的量化平台、以及各种量化研究工具。 穿云箭自带指标公式源码运行模块&#xff0c;可以为其他量化平台…

基于云原生的一体化监控系统Day1

7.1 监控体系部署管理 7.2k8s集群层面监控 准备&#xff1a;部署k8s集群 master&#xff1a;192.168.192.128 node01&#xff1a;192.168.192.129 node02&#xff1a;192.168.192.130 1.prometheus架构&#xff1a; prometheus工作原理&#xff1a; 1.数据采集&#xff…

AI视频平台精选:国内外对比与推荐

原文&#xff1a;AI视频平台精选&#xff1a;国内外对比与推荐 国内外有多个平台可以生成AI视频&#xff0c;这些平台各有其独特的优点和缺点。以下是对一些主要平台的详细介绍&#xff0c;包括它们的优缺点&#xff0c;以及针对个人和自媒体用户的推荐。 国内平台 1. 快手可…

为Windows Terminal 配置zsh + Oh-My-Zsh

参考&#xff1a; 为Windows Terminal 配置zsh Oh-My-Zsh 【核心】https://juejin.cn/post/7229507721795993661 https://blog.cloudorz.com/post/configure-zsh-for-windows-terminal/ https://zhuanlan.zhihu.com/p/455925403 本文以 Git Bash 终端为基础&#xff0c;来…

android openGL ES详解——剔除

一、正面剔除 在绘制3D场景的时候,我们需要决定哪些部分是对观察者 可见的,或者哪些部分是对观察者不可⻅的.对于不可见的部分,应该及早丢弃.例如在⼀个不透明的墙壁后,就不应该渲染.这种情况叫做”隐藏⾯消除”(Hidden surface elimination). 立方体中的正背面 任何物体都有…

Vue 项目中使用路由鉴权实现网页进度条

概述 在 Web 开发中&#xff0c;用户界面的流畅性和交互性对用户体验至关重要。为了在页面跳转时给用户提供反馈&#xff0c;我们可以利用 NProgress 这样的第三方库来实现一个进度条。本文档将指导您如何在 Vue 项目中结合路由鉴权来实现这一功能。 准备工作 确保您已经安装…