vue导出excle单sheet文字居中表头加粗显示

news2024/10/5 14:17:16

效果图:
在这里插入图片描述

首先下载依赖

npm install xlsx --save 
npm install xlsx-style --save


在需要导出excle的vue文件中导入依赖
import XLSX from "xlsx"
import XLSXStyle from 'xlsx-style'


在method中定义
methods:{
	// 格式化
    formatJson(filterVal, jsonData) {
      let start_id = 1
      return jsonData.map(v => filterVal.map((j) => {
        if (j == 'sex') {
          return v[j] == 1 ? '男' : '女'
        }
        if (j == 'checkResult') {
          return v[j] == 1 ? '正常' : '异常'
        }
        if (j == 'id') {
          return start_id++
        }
        return v[j]
      }))
    },
	
	// 导出主方法(点击事件绑定此方法)
    bulkExport() {
      // list为表格的原始数据后面有配图
      let list = this.userNewInfo;
      // 需要在list中取的表头相对应的键名
      let filterVal = ['id', 'instituteName', 'specialityName', 'classesName', 'stuNo', 'stuName', 'sex', 'checkResult']
      // 原始数据提取格式化为自己需要的数据
      let data = this.formatJson(filterVal, list)
      // title就是导出的excle的表头
      let titles = ['序号', '学院', '专业', '班级', '学号', '姓名', '性别', '体检状态']
      // 在data数组最前面加上表头的名称
      data.unshift(titles)
      var sheet = XLSX.utils.json_to_sheet(data, {
        skipHeader: true,
      });

      for (const key in sheet) {
      	// 所有单元格居中
        if (key.indexOf("!") === -1 && sheet[key].v) {
          sheet[key].s = {
            alignment: {
              horizontal: "center",
              vertical: 'center',
              wrap_text: true,
            }
          }
        }
        
        // 表头加颜色加边框
        if (key.replace(/[^0-9]/ig, '') === '1') {
          sheet[key].s = {
            fill: { //背景色
              fgColor: { rgb: 'C0C0C0' }
            },
            font: {//字体
              name: '宋体',
              sz: 12,
              bold: true
            },
            border: {//边框
              bottom: {
                style: 'thin',
                color: 'FF000000'
              },
              top: {
                style: 'thin',
              },
              left: {
                style: 'thin',
              },
              right: {
                style: 'thin',
              },
            },
            alignment: {
              horizontal: 'center' //水平居中
            }
          }
        }
        // 我总共就这么多列,就一个个设置的列宽
        sheet['!cols'] = [{ wch: 6 }, { wch: 24 }, { wch: 24 }, { wch: 10 }, { wch: 12 }, { wch: 10 }, { wch: 8 }, { wch: 10 },];//列宽
      }
		// 根据业务需求修改sheet名称和excle导出的名称
      this.openDownload(this.sheet2blob(sheet, 'sheet1'), '测试文件.xlsx');
    },
	
	// 处理excle文件
    sheet2blob(sheet, sheetName) {
      let wb = XLSX.utils.book_new();
      wb.SheetNames.push(sheetName)
      wb.Sheets[sheetName] = sheet;
      var wbout = XLSXStyle.write(wb, { bookType: '', bookSST: false, type: 'binary' })
      var blob = new Blob([s2ab(wbout)], { type: "" }, sheetName);
      // 字符串转ArrayBuffer
      function s2ab(s) {
        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;
      }
      return blob;
    },
	
	// 下载excle文件
    openDownload(url, saveName) {
      if (typeof url == "object" && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = saveName || ""; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    },
  }

PS:
表格原始数据长这样:
在这里插入图片描述
处理后的data长这样:
在这里插入图片描述

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

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

相关文章

月近万次发布,故障率<4‰如何做到?去哪儿测试左移重难点揭秘!

一分钟精华速览 去哪儿发布的数据显示,在过去一年中,其发布故障率始终保持在 4‰ 以下并不断降低。作为一家出行旅游服务平台,去哪儿网如何在复杂的业务场景下,仍能保持如此低的故障率?其中功能测试左移功不可没。 本…

高质量编程-编码规范之代码格式和注释

前言: \textcolor{Green}{前言:} 前言: 💞这个专栏就专门来记录一下寒假参加的第五期字节跳动训练营 💞从这个专栏里面可以迅速获得Go的知识 本次文章不仅仅是在 go 中主要注意,在编写其他语言中也同样重要…

单片机介绍选型(嵌入式学习)

单片机介绍&选型 单片机介绍常见的单片机单片机如何选型 单片机介绍 单片机(Microcontroller)是一种集成电路芯片,具有处理器核心、存储器、输入/输出接口和各种外设的功能。 单片机是单片微型计算机的简称,MCU是Microcontro…

15. WebGPU 相机

在上一篇文章中,我们必须将 F 移到视锥体前面,因为 mat4.perspective 函数 将眼睛放在原点 (0, 0, 0) 并且把对象 放到 位于眼前 -zNear 到 -zFar 之间的视锥体中。这意味着,任何想要显示的东西,都需要放在这个空间里。 在现实世…

对英雄联盟英雄属性数据的预处理及相似度矩阵计算

目录 一、引言 二、任务1 1、填充缺失值 2、用中位数填充“生命值”属性列缺失值 3、 用均值填充“生命值”属性列缺失值 三、任务2 注:英雄联盟英雄属性数据资源可在博客资源中自行获取。 一、引言 英雄联盟作为一款古早的刀塔游戏,可谓之刀塔游…

jumpserver-v2.2.2【部署教程】

目录 什么是 跳板机 跳板机的缺点 使用堡垒机的优势 jumpserver的组件 【1】时间同步 【2】安装依赖 【3】修改数据库字符集、创建远程用户 【4】创建python的虚拟环境,用于专门运行jumpserver的环境 【5】获取jumpserver的代码 【6】安装编译环境依赖 …

【管理系列-09】软件成本怎么评估,知己知彼才能做软件造价

项目来了,总要叫来几个人,讨论一下成本是多少,能不能接,作为研发经理,能够较为合理的评估成本是一项必备技能,如何科学合理的评估,达到对内对外都满意,我想这是每个研发经理的必修课…

管理类联考——逻辑——知识篇——分析推理——四、数字——haimian

数字 题型识别 与数字相关的分析推理题在逻辑科目中扮演着非常重要的角色,可能涉及方程、不等式、分子与分母比值关系、百分比、概率、集合运算等,可结合数学方法或利用数字规律进行解题。 思维导图 常用公式 从某种意义上说,数学本身就是…

五、浅析[ElasticSearch]底层原理与分组聚合查询

目录 一、ElasticSearch文档分值_score计算底层原理1.boolean model2.relevance score算法2、分析一个document上的_score是如何被计算出来的 二、分词器工作流程1.character filter、tokenizer、token filter2、内置分词器的简单介绍3、定制分词器3.1默认的分词器--standard3.…

《教我兄弟学Android逆向13 xpose改机开发01-环境设置》

上一篇 《教我兄弟学Android逆向12 编写xposed模块》 我们了解了xpose的基本原理并一起搭建了xpose的hook环境,你也很好的完成了课后作业,但是通过后面的测试练习你发现xpose在不同系统环境的安装方法是不一样的,在我们之前的低系统手机上面直接安装就能…

LNMP六个实验

目录 访问状态统计配置 基于授权的访问控制 基于客户端的访问控制 基于域名的 Nginx 虚拟主机 基于IP 的 Nginx 虚拟主机 基于端口的 Nginx 虚拟主机 总结 访问状态统计配置 查看已安装的 Nginx 是否包含 HTTP_STUB_STATUS 模块 修改 nginx.conf 配置文件,…

Python基础四

目录 一、Python数据类型--列表 1.列表的下标 2.访问列表中的元素 3.更新列表元素 4.删除列表元素 5.列表脚本操作符 6.列表截取与拼接 截取 拼接 7.嵌套列表 8.列表比较 二、Python内置函数--列表相关 一、Python数据类型--列表 Python中的列表类似于java的数组 列…

Rust语言从入门到入坑——(7)Rust 错误处理

文章目录 0 引入1、可恢复错误2、可恢复错误递归3、不可恢复错误4、kind 方法5、总结 0 引入 Rust 有一套独特的处理异常情况的机制,程序中一般会出现两种错误:可恢复错误和不可恢复错误。 1、可恢复错误的典型案例是文件访问错误,如果访问一…

RVEA算法

RVEA 1 目标函数2 预备知识3 参考向量引导选择4 更新参考向量5 流程6 代码7 运行效果 1 目标函数 min ⁡ X f ( X ) ( f 1 ( X ) , f 2 ( X ) , . . . , f M ( X ) ) \min_{\small{X}} \pmb{f(\small{X})} (f_1(\small{X}), f_2(\small{X}), ..., f_M(\small{X})) Xmin​f(X)…

数据结构——快速排序的介绍

快速排序 快速排序是霍尔(Hoare)于1962年提出的一种二叉树结构的交换排序方法。快速排序是一种常用的排序算法,其基本思想是通过选择一个元素作为"基准值",将待排序序列分割成两个子序列,其中一个子序列的元素都小于等于基准值&am…

DAY29:回溯算法(四)组合总和+组合总和Ⅱ

文章目录 39.组合总和思路伪代码为什么传入i而不是i1,不会导致无限循环 完整版剪枝优化剪枝修改完整版补充:std::sort升降序的问题(默认升序) 40.组合总和Ⅱ思路最开始的写法debug测试:逻辑错误修改完整版:…

营销策划报告个人心得

营销策划报告个人心得篇1 20__年3月27日晚,我们12级市营专业的同学们早早的来到了大成楼。根据网络营销与策划课程实训要求,覃希老师邀请了校外企业经理给我们进行产品培训。 我们按实训项目分别安排在C302和C304教室培训,培训中同学们认认真…

基于深度学习的高精度水果检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要:基于深度学习的高精度水果(苹果、香蕉、葡萄、橘子、菠萝和西瓜)检测识别系统可用于日常生活中或野外来检测与定位水果目标,利用深度学习算法可实现图片、视频、摄像头等方式的水果目标检测识别,另外支持结果可视…

OpenGL 模板测试

1.示例效果图 选中模型对象,出现模型轮廓。 2.简介 当片段着色器处理完一个片段之后,模板测试会开始执行,和深度测试一样,它也可能会丢弃片段。接下来,被保留的片段会进入深度测试,它可能会丢弃更多的片…

MongoDB集群管理(三)

MongoDB集群管理 集群介绍 为什么使用集群 随着业务数据和并发量的增加,若只使用一台MongoDB服务器,存在着断电和数据风险的问题,故采用Mongodb复制集的方式,来提高项目的高可用、安全性等性能。 MongoDB复制是将数据同步到多个…