xlsx实现excel下载功能——js

import dayjs from "dayjs";
import * as XLSX from "xlsx";
import XLSXS from "xlsx-style";export function export2Excel(info: {// 文件名(工作簿名)title: string;// 数据data: any[] | Record<string, any>[];// 表格列header: {title: any;key: any;}[];
}) {const { title, data, header } = info;// title重命名const tableTitle = `${title}_评论数据_${dayjs().format("YYYY-MM-DD_HH_mm_ss")}`;// 创建一个工作簿const wb = XLSX.utils.book_new();// 添加sheet到工作簿中addSheet({xl: XLSX,wb,data,header,tableTitle,});// 文件存储成blob流数据(二进制流)const tmpDown = new Blob([s2ab(// 为了解决样式丢失问题只能用XLSXD来进行转换XLSXS.write(wb, {bookType: "xlsx",type: "binary",})) as any,]);// 下载二进制流(title是下载文件的名字)downExcel(tmpDown, tableTitle + ".xlsx");
}/*** 添加sheet页* @param info* wb: 工作簿* xl: XSLX库* data: 表格数据* header: 表格头* title: 表格标题**/
const addSheet = (info: {wb: any;xl: any;data: any[] | Record<string, any>[];header: {title: any;key: any;}[];tableTitle: string;
}) => {const { wb, xl, data, header, tableTitle } = info;const keyArr = header.map((item: any) => item.key);const nameArr = header.map((item: any) => item.title);const excelData = [nameArr];data.forEach((item: any) => {const dataArr: any = [];keyArr.forEach((key: any) => {dataArr.push(item[key]);});excelData.push(dataArr);});// excelData:第一行是表头其他行是数据// xl.utils.aoa_to_sheet: 将js数据转换成excel数据,类型是A1,A2,A3,B1,B2,B3......,并创建sheetconst tableData = xl.utils.aoa_to_sheet(excelData); // 此处excelData为表格的数据// tableData格式:[excel对应的行列:{v:值,s:表格显示配置}]// tableData['!cols']:定义导出表格每列的宽度,从左到右依次对应header中从左到右的列tableData["!cols"] = [];tableData["!rows"] = [{ hpx: 40 }, { hpx: 40 }, { hpx: 40 }];// 给导出的excel做样式处理header.forEach((col: any, colIndex: any) => {// 设置列宽switch (col.key) {case "commentTime":tableData["!cols"].push({ wch: 18 });break;case "connect":tableData["!cols"].push({ wch: 25 });break;default:tableData["!cols"].push({ wch: 15 });break;}// 格式化tableData数据格式,添加样式excelData.forEach((row, rowIndex) => {// 该数据对应的单元格位置const cellPosition = createPosition(colIndex, rowIndex);if (tableData[cellPosition]) {// 单元格的样式/主题(如果适用)tableData[cellPosition].s = {// 数据水平垂直居中alignment: {horizontal: "left",vertical: "center",},fill: {// 背景色// fgColor: { rgb: "FEE8D9" },},border: {top: { style: "thin", color: { rgb: "ebebeb" } },bottom: { style: "thin", color: { rgb: "ebebeb" } },left: { style: "thin", color: { rgb: "ebebeb" } },right: { style: "thin", color: { rgb: "ebebeb" } },},// border: {//   right: {//     style: "dashed",//     color: { rgb: "FFFFFF" },//   },// },};// 第一行if (rowIndex === 0) {tableData[cellPosition].s.fill = {// 背景色// fgColor: { rgb: "fb731a" },};tableData[cellPosition].s.font = {// 字体sz: "12",// color: { rgb: "FFFFFF" },bold: true,shadow: true,};} else if (typeof row[colIndex] === "string" &&row[colIndex].includes("%")) {// 格式化百分号数据为excel中的number类型let value = tableData[cellPosition].v;value = Number(value.replace("%", ""));tableData[cellPosition].v = (value / 100).toFixed(4);// 单元格展示类型tableData[cellPosition].z = XLSX.SSF._table[10];// 单元格数据类型tableData[cellPosition].t = "n";}}});});// 将sheet追加到工作簿, wb:工作簿,tableData:新的sheet,title:sheet名称// sheet 名称 不能 超过 31 位,否则 会报错xl.utils.book_append_sheet(wb, tableData, tableTitle.substring(0, 31)); // title为自定义的sheet表名
};// 自定义下载文件方法
/*** 使用a标签将文件进行下载* @param obj blob流数据* @param fileName 文件名*/
const downExcel = (obj: any, fileName: string) => {const a_node = document.createElement("a");a_node.download = fileName;if ("msSaveOrOpenBlob" in navigator) {//  msSaveOrOpenBlob 方法允许用户在客户端上下载文件(navigator as any).msSaveOrOpenBlob(obj, fileName);} else {// createObjectURL根据传入的参数创建一个指向该参数对象的URL.a_node.href = URL.createObjectURL(obj);}a_node.click();//setTimeout(() => {// 释放一个通过URL.createObjectURL()创建的对象URLURL.revokeObjectURL(obj);}, 2000);
};/*** 文件流转换:将二进制字符串转换成对应的Unicode编码数组* @param s 文件的二进制字符串* @returns 返回存储文件数据的buffer或数组*/
const s2ab = (s: any) => {if (typeof ArrayBuffer !== "undefined") {// buffer存储// 在内存中分配s.length个的字节空间const buf = new ArrayBuffer(s.length);// Uint8Array 数组类型表示一个 8 位无符号整型数组,创建时内容被初始化为 0const view = new Uint8Array(buf);// 将二进制字符串转换成Unicode编码存储for (let i = 0; i != s.length; ++i) {view[i] = s.charCodeAt(i) & 0xff;}return buf;} else {// 数组存储const buf = new Array(s.length);for (let i = 0; i != s.length; ++i) {buf[i] = s.charCodeAt(i) & 0xff;}return buf;}
};// 行数 需要 小于 26 * 26
/**** @param colIndex 该数据对应列数* @param rowIndex 该数据对应的行数* @returns 返回的是该数据对应的单单元个位置*/
const createPosition = (colIndex: any, rowIndex: any) => {rowIndex++;if (colIndex >= 26) {const n1 = Math.floor(colIndex / 26) - 1;const n2 = colIndex % 26;const s1 = String.fromCharCode(n1 + 65);const s2 = String.fromCharCode(n2 + 65);return s1 + s2 + rowIndex;} else {// fromCharCode:将 Unicode 编码转为一个字符 (65对应A)return String.fromCharCode(colIndex + 65) + rowIndex;}
};

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

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

相关文章

Crontab命令详解:轻松驾驭Linux定时任务,提升系统效率

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 引言&#xff1a; crond是Linux系统中用来定期执行命令或指定程序任务的一种服务或软件…

AI agent是什么,什么技术栈

AI agent&#xff0c;也称为会话代理或聊天机器人&#xff0c; 是一种通过文本或语音模拟人类对话的计算机程序。 它们旨在以自然且引人入胜的方式理解和响应用户输入。 AI agent 被广泛用于各种应用中&#xff0c;包括客户服务、营销、 销售和教育。 有两种主要类型的 AI agen…

软件包管理简介

windows的软件包都不能直接在windows当中安装和使用&#xff0c;好处是windows中的大部分病毒和木马对于Linux都是不可识别的。坏处是所有的软件都必须对linux单独进行软件开发。 1.软件包分类 源码包 脚本安装包 绝大多数源代码包都是使用C语言来写的。 特征是开源。 二进…

Qt开发报错:Q_INTERFACES Error: Undefined interface

1、背景 VS2019qt5.12.10 从svn拉下来的项目&#xff0c;结果报错&#xff1a; Q_INTERFACES Error: Undefined interface 之前在VS的扩展中在线安装了qt插件&#xff0c; 安装了一半&#xff0c;比较慢&#xff0c;直接强行退出了。。 后来安装了qt官网的插件。。。。 2、报…

Linux内核 -- 汇编结合ko案例之PMU获取cpu cycle技术

ARMv7汇编实现周期计数读取与清空 本文档详细描述了如何在ARMv7平台上使用汇编语言编写周期计数器读取与清空函数&#xff0c;如何在内核模块中导出这些函数供其他模块调用&#xff0c;以及如何使用Netlink接口供用户态程序进行调用。 1. 汇编函数实现 首先&#xff0c;编写…

nginx架构学习

前言 这篇文章主要记录下对nginx架构的学习记录。 架构设计 优秀的模块化设计 高度模块化的设计是Nginx的架构基础。在Nginx中&#xff0c;除了少量的核心代码&#xff0c;其他一切皆 为模块。 在这5种模块中&#xff0c;配置模块与核心模块都是与Nginx框架密切相关的&…

Pharmacy Management System v1.0 文件上传漏洞(CVE-2022-30887)

前言 CVE-2022-30887 是一个存在于 Pharmacy Management System v1.0 中的远程代码执行&#xff08;RCE&#xff09;漏洞。这个漏洞存在于 /php_action/editProductImage.php 组件中。攻击者可以通过上传一个精心制作的图像文件来执行任意代码。 漏洞详细信息 漏洞描述: Pha…

第二十三课,再识字符串

前言&#xff0c;再识字符串 字符串是我们学习python编程第一眼见到的东西&#xff0c;一行print(“hello world”)可谓是太亲切了&#xff0c;但在此之前我们对字符串的认知也仅局限于如何用单引号、双引号、三引号去定义字符串并打印&#xff0c;今天开始我们就更深入地去理…

推荐系统入门

https://github.com/LongxingTan/Machine-learning-interview/blob/main/03_system/03_ml/recommendation.md 离线层&#xff1a;不用实时数据&#xff0c;不提供实时响应&#xff1b; 近线层&#xff1a;使用实时数据&#xff0c;不保证实时响应&#xff1b; 在线层&#xff…

【大数据】StarRocks的系统架构

StarRocks 架构简洁&#xff0c;整个系统的核心只有 FE&#xff08;Frontend&#xff09;、BE (Backend) 或 CN (Compute Node) 两类进程&#xff0c;方便部署与维护&#xff0c;节点可以在线水平扩展&#xff0c;元数据和业务数据都有副本机制&#xff0c;确保整个系统无单点。…

淘宝评论数据爬取全攻略:一网打尽好评差评,轻松分析消费趋势

在大数据时代&#xff0c;淘宝评论数据如同一座金矿&#xff0c;蕴藏着消费者的直接反馈和市场趋势。作为Python爬虫工程师&#xff0c;如何高效、合法地挖掘这座金矿&#xff1f;本文将手把手教你打造一款强大的淘宝评论爬虫&#xff0c;让你在数据分析的海洋里乘风破浪。关键…

Sharding 分片配置实例

Sharding 分片配置实例 shardingRule:tables:t_order:actualDataNodes: ds${0..1}.t_order${0..1}databaseStrategy:inline:shardingColumn: user_idalgorithmExpression: ds${user_id % 2}tableStrategy: inline:shardingColumn: order_idalgorithmExpression: t_order${orde…

轻松解锁电脑强悍性能,4000MHz的玖合星舞 DDR4 内存很能打

轻松解锁电脑强悍性能&#xff0c;4000MHz的玖合星舞 DDR4 内存很能打 哈喽小伙伴们好&#xff0c;我是Stark-C~ 很多有经验的电脑玩家在自己DIY电脑选购内存条的时候&#xff0c;除了内存总容量&#xff0c;最看重的参数那就是频率了。内存频率和我们常说的CPU主频一样&…

通用管理页面的功能实现

在Windows Forms&#xff08;WinForms&#xff09;应用程序中&#xff0c;创建一个通用的管理页面通常涉及对数据的增删改查&#xff08;CRUD&#xff09;操作&#xff0c;以及一些额外的功能&#xff0c;如数据过滤、排序、导出和导入等。 先看一个仓库管理页面要素。 仓库管…

uniapp开发H5、手机APP、微信小程序 可拖动菜单按钮

ml-fab 插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id18909 1、可拖拽悬浮按钮 ml-fab&#xff0c;支持自定义插槽&#xff0c;点击可展开一个图标按钮菜单&#xff0c;可随意拖拽。 2、支持自定义插槽&#xff0c;可实现自定义配置。 3、操作简单易上手。 ml-f…

同元软控受邀出席2024年工业软件与新质生产力创新发展论坛

近日&#xff0c;由广东省工业软件学会主办的“2024年工业软件与新质生产力创新发展论坛”在广州成功举办。同元软控深圳子公司副总经理周胜受邀出席&#xff0c;并作《数智驱动创新&#xff0c;科学计算与系统建模仿真加速新质生产力进化》主题演讲。 本次论坛集结工业软件界…

【IVI】CarService启动-Android13

【IVI】CarService启动-Android13 1、CarServiceImpl启动概述2、简要时序图 1、CarServiceImpl启动概述 【IVI】CarService启动&#xff1a; CarServiceHelperService中绑定CarServiceICarImpl初始化各种服务 packages/services/Car/README.md 2、简要时序图

产品需求说明书模板

在软件开发过程中&#xff0c;需求说明书(Product Requirement Document&#xff0c;PRD)是项目启动的关键文档之一&#xff0c;它明确了项目的目标、范围、功能要求以及非功能要求等。它确保了开发团队、利益相关者和最终用户之间对软件功能和性能有共同的理解。 一、引言 需…

PCIe物理层_CTLE(continuous time linear equalizer)

1.CTLE&#xff08;continuous time linear equalizer&#xff09; 的作用 信号在介质的传输过程中存在趋肤效应(skin effiect)和能量损耗&#xff0c;在接收端数据会存在失真&#xff0c;并且呈现出低通特性。什么意思呢&#xff1f;就是低频率的信号衰减幅度小&#xff0c…

音频接口电路的PCB设计

Audio接口是音频插孔&#xff0c;即音频接口&#xff0c;可分为Audio in接口和Audio out接口。音频接口是连接麦克风和其他声源与计算机的设备&#xff0c;其在模拟和数字信号之间起到了桥梁连接的作用。对于平台的数字音频接RK3588口&#xff0c;需遵循《Rockchip RK3588 High…