xlsx xlsx-style-vite 实现前端根据element 表格导出excel且定制化样式 背景 列宽等

前言

先看下最终效果图吧,需要的可以参考我的实现方式
这是最终导出的表格文件

在这里插入图片描述

类似这种的,特定单元格需要额外标注,表头也有月份然后细分的,表格组件是这样的

在这里插入图片描述

在这里插入图片描述

注意

别使用xlsx-style 这个库,太多问题了,按照网上的教程改了源码都不行,哈哈,然后选择xlsx-style-vite这个库,一点问题没有了。

import * as XLSX from 'xlsx'  
import * as XLSX_STYLE from 'xlsx-style-vite'  
import * as FileSaver from 'file-saver'

实现

这里贴一下主要实现代码吧

// 导出 Excel 的方法
const exportExcel = async () => {LoadBtn.value = trueconst elementTable = tabRef.valuelet worksheet = XLSX.utils.table_to_sheet(elementTable.$el)const workbook = XLSX.utils.book_new()setPubExcel(worksheet)XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')let wbout = XLSX_STYLE.write(workbook, { bookType: 'xlsx', bookSST: false, type: 'binary' })FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream;charset=utf-8"' }),'xx项目汇总统计' + dayjs().format('YYYYMMDD') + '.xlsx')// 导出 Excel 文件// XLSX.writeFile(workbook, 'table.xlsx')
}//设置公共样式
const setPubExcel = (data: any) => {data['!cols'] = [{ wpx: 60 },{ wpx: 200 },{ wpx: 60 },{ wpx: 400 },{ wpx: 90 },{ wpx: 80 },{ wpx: 80 },{ wpx: 100 },{ wpx: 100 },{ wpx: 70 },{ wpx: 70 },{ wpx: 70 },{ wpx: 600 },{ wpx: 200 }]const excludes = ['!cols', '!fullref', '!merges', '!ref', '!rows']for (let key in data) {if (data?.hasOwnProperty(key)) {// if (!excludes.includes(key)) {// console.log(key, 'key', data[key], 'value-------')if (key[0] === 'G' || key[0] === 'F') {// console.log('时间', data[key], '-----', key)const v = data[key].vif (!v || v === '') continue// console.log('after-time', formatExcelDate(v))let time = formatExcelDate(v)// 判断是否小于当前时间if (dayjs().isAfter(time)) {data[key].s = {// border: {//   top: { style: 'thin', color: { rgb: '000000' } },//   bottom: { style: 'thin', color: { rgb: '000000' } },//   left: { style: 'thin', color: { rgb: '000000' } },//   right: { style: 'thin', color: { rgb: '000000' } }// },// alignment: {//   horizontal: 'center', //水平居中对齐//   vertical: 'center', //垂直居中//   wrapText: true //是否换行// },fill: {fgColor: { rgb: 'FFFF0000' } // 设置标题单元格的背景颜色}}}}}}
}const s2ab = (s: any) => {const buf = new ArrayBuffer(s.length)const view = new Uint8Array(buf)for (let i = 0; i < s.length; i++) {view[i] = s.charCodeAt(i) & 0xff}return buf
}// 表格特定的时间转换
function formatExcelDate(numb: number, format = '/') {const time = new Date((numb - 25569) * 24 * 3600000)return time.toLocaleDateString('zh-CN', {year: 'numeric',month: '2-digit',day: '2-digit'}).replace(/\//g, format)
}

end

希望对你有帮助,点个赞吧!

在这里插入图片描述

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

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

相关文章

【C语言刷力扣】1768.交替合并字符串

题目&#xff1a; 解题思路&#xff1a; 将 word1 和 word2 元素依次添加至 ans 的后面。 时间复杂度&#xff1a; &#xff0c; n是word1的长度 m是word2的长度 空间复杂度&#xff1a; char* mergeAlternately(char* word1, char* word2) {int len1 strlen(word1);in…

供电电压和逻辑电压

供电电压和逻辑电压是电子电路中两个重要的电压概念&#xff0c;它们有不同的定义和应用。以下是它们之间的主要区别&#xff1a; 1. 定义 供电电压&#xff08;Power Supply Voltage&#xff09;&#xff1a; 供电电压是用于给电路或设备提供电能的电压值。它是电源输出的电压…

【Linux】top命令查看CPU、内存使用率、解释

1. top 命令 top 是最常用的实时监控工具之一&#xff0c;可以显示 CPU 的总利用率以及各个进程的 CPU 使用情况。在Linux命令行直接输入top即可查看动态原始数据 top 在 top 命令的输出中&#xff0c;最上面的一行会显示 CPU 的使用情况&#xff1a; us&#xff08;User&a…

写了十几年程序,今天才第一天知道什么是屎山代码

可以说&#xff0c;我确实没在工作中用过Javascript&#xff0c;因为我从未见过如此“厚颜无耻”的代码 我曾经也是学过2~3年&#xff0c;还是JQuery的年代&#xff0c;但应该确实没在实战中用过&#xff0c;否则我怎么会不记得写过这些屎山代码的&#xff1f;&#xff1f;&…

图片怎么转文字?11种好用的方法!

如何快速将图片的文字提取出来&#xff0c;可以大量节省手打的时间&#xff0c;无论是截图&#xff0c;或者批量提取照片文字&#xff0c;都经常需要这个操作&#xff01; 作为一名社畜&#xff0c;俺也经常用到各种图片转文字工具&#xff0c;今天通过测评12个主流的图片转文…

React Native 项目中使用 Expo Application Services (EAS) 进行多渠道打包

在 React Native 项目中使用 Expo Application Services (EAS) 进行多渠道打包&#xff0c;你可以利用 EAS Build 来构建你的应用。以下是一些关键步骤和配置&#xff1a; 安装 EAS CLI&#xff1a; 首先&#xff0c;你需要安装 EAS CLI 工具&#xff0c;以便在本地使用 EAS 的…

Linux例行性命令

1.单一执行的例行性工作at 单一执行的例行性工作&#xff1a;仅处理执行一次就结束了 at命令详解 ——命令格式&#xff1a; at [参数] [时间] -m 当任务完成之后&#xff0c;即使没有标准输出&#xff0c;将给用户发送邮件 -l atq的别名&#xff0c;可列出目前系…

面对AI算力需求激增,如何守护数据中心机房安全?

随着人工智能&#xff08;AI&#xff09;技术飞速发展&#xff0c;AI算力需求呈现爆发式增长&#xff0c;导致对数据设备电力的需求指数级攀升。这给数据中心带来前所未有的挑战和机遇&#xff0c;从提供稳定的电力供应、优化高密度的部署&#xff0c;到数据安全的隐私保护&…

OpenVLA-首个开源视觉语言动作大模型

官网&#xff1a;https://openvla.github.io/ 现在大模型已经卷到了机器人领域。 在视觉语言模型&#xff08;VLM&#xff09;的基础上&#xff0c; 加入机器人的动作&#xff08;Action) 这一模态&#xff0c; 视觉语言动作大模型&#xff08;VLA&#xff09;是目前大模型应用…

2024新手攻略:项目管理工具+PMP备考经验不容错过!

&#xff08;一&#xff09;热门工具大盘点 禅道是一款专注于软件开发项目管理的工具。它涵盖了项目管理的各个环节&#xff0c;包括需求管理、任务分配、缺陷跟踪等。禅道的优势在于其对软件开发流程的深入理解和支持&#xff0c;能够帮助开发团队更好地管理项目进度和质量。…

如何应对 Android 面试官 -> ANR 如何优化?线上 ANR 如何监控?

前言 本章主要围绕 ANR 如何监控以及优化&#xff1b; 基本概念 ANR(Android Not Responding) 是指应用程序未响应&#xff0c;Android 系统对于一些事件需要在一定的时间范围内完成&#xff0c;如果超过预订时间未能得到有效响应或者响应时间过长&#xff0c;都会造成 ANR。 …

91 VRRP负载局衡+主备切块 V2

实操四 负载均衡主备 VRRP&#xff08;虚拟路由冗余协议&#xff09;是一种网络协议&#xff0c;用于提高网络的可用性和冗余性。VRRP可以将多个路由设备组成一个虚拟路由器&#xff0c;当主路由设备故障时&#xff0c;自动切换到备用路由设备&#xff0c;从而实现高可用性。 …

Mamba学习笔记(2)—序列数据处理基础

文章目录 (1) RNN&#xff08;Recurrent Neural Networks&#xff09;基本原理代码定义 (2) SLTM (Long Short-Term Memory)基本原理代码定义 (3) GRU (Gated Recurrent Unit)基本原理代码定义 (4) Transformer&#xff08;☆☆☆Attention Is All You Need☆☆☆&#xff09;0…

OpenCloud7.9 安装docker

错误代码 failure: repodata/repomd.xml from docker-main-repo: [Errno 256] No more mirrors to try. http://mirrors.aliyun.com/docker-engine/yum/repo/main/centos/2/repodata/repomd.xml: [Errno 14] HTTP Error 404 - Not Found 解决步骤&#xff1a; 1. 删除或禁用错…

【数据价值化】数据资产价值实现:入表、交易、融资和代运营

在当今数字化时代,数据已经成为企业最宝贵的资源之一。如何有效管理和利用数据资产,实现数据价值最大化,已成为众多企业面临的重要课题。本文将深入探讨实现数据资产价值的四种主要方式:入表、交易、融资和代运营。通过剖析这四种方式的内涵、流程、关键点以及优势和挑战,为企业…

vue前端开发框架的常见知识点和应用

Vue.js 是一个渐进式的前端框架&#xff0c;用于构建用户界面和单页面应用程序&#xff08;SPA&#xff09;。在开发过程中&#xff0c;有一些常见的知识点和应用场景非常重要。下面是对Vue.js的主要知识点和应用的详细说明&#xff1a; 一、基础知识点 1. Vue实例 Vue实例是…

nginx解决非人类使用http打开的443,解决网安漏扫时误扫443端口带来的问题

一、问题描述 正常访问https的站点时&#xff0c;使用网址https://www.baidu.com&#xff0c;但会有一种错误的访问请求http://www.baidu.com:443&#xff0c;一般都是非人类所为&#xff0c;如漏洞扫描工具&#xff0c;那么请求以后带来的后果是个错误页面 400 Bad Request T…

如何选择合适业务协作平台?—— 板栗看板给你答案

在当今快速发展的商业环境中&#xff0c;团队协作和项目管理变得越来越重要。业务协作平台作为一种工具&#xff0c;可以帮助团队成员进行有效的沟通、任务分配和进度跟踪。这些平台通常具备项目管理、文档共享、实时通讯等功能&#xff0c;以提高团队的工作效率和协作能力。 一…

AttributeError: ‘function‘ object has no attribute ‘decode‘

h5py版本过高&#xff0c;降低版本即可。 1.卸载h5py pip uninstall h5py 卸载后&#xff0c;查看h5py版本&#xff0c;显示这个代表卸载成功。 import h5py print(h5py.__version__) 2. 安装低版本的h5py<3.0.0 目前的版本有&#xff1a; 2.2.1, 2.3.0b1, 2.3.0, 2.3.1,…

如何看ip属于什么地址

在数字化时代&#xff0c;IP地址作为互联网通信的基石&#xff0c;扮演着至关重要的角色。无论是网络管理、安全防护&#xff0c;还是日常的网络访问&#xff0c;理解IP地址的性质和分类都是必不可少的技能。本文将深入探讨如何判断一个IP地址属于哪一类地址&#xff0c;并详细…