vue前端接包(axios)+ 前端导出excel(xlsx-js-style)

// 先在请求处加上:    
responseType: 'arraybuffer', // 指定响应类型为ArrayBuffer
 const data = new Uint8Array(response.data); // 将ArrayBuffer转换为Uint8Arrayconst val = { columns: [], data: [] }let offset = 0; // 用于跟踪当前解析到的位置while (offset < data.length) {// 确保当前偏移量可读取8个字节if (offset + 8 > data.length) {console.warn('字节数不足,无法读取偏移处的长度:', offset);break; // 不够数据,退出循环}// 获取前8个字节,计算包长度const lengthHex = String.fromCharCode.apply(null, data.slice(offset, offset + 8));const packLength = parseInt(lengthHex, 16); // 转换为十进制// 确保当前偏移量可读取完整的数据包if (offset + 8 + packLength > data.length) {console.warn('字节数不足,无法在偏移处读取数据包:', offset);break; // 不够数据,退出循环}// 使用TextDecoder来处理JSON内容const decoder = new TextDecoder('utf-8');const jsonBody = decoder.decode(data.slice(offset + 8, offset + 8 + packLength)); // 获取JSON内容// 解析并存储数据包try {const packetData = JSON.parse(jsonBody); // 解析JSONif (offset == 0) {val.columns = packetData.columns;}val.data.push(...packetData.data);} catch (error) {console.error('Error parsing JSON:', error, jsonBody);}// 更新偏移量offset += 8 + packLength; // 移动到下一个包的起始位置}// 现在 allPackets 包含所有解析后的数据包console.log('All parsed packets:', val);const worker = new Worker(new URL('./export-worker.ts', import.meta.url), { type: 'module' });worker.postMessage({ data: val });worker.onmessage = (e) => {if (e && e.data && e.data.t == "export") {e.stopPropagation();e.preventDefault();// data will be the Uint8Array from the workerconst res = e.data.v;downloadExcelFile(new Blob([res], { type: "application/octet-stream" }), row.TaskName + '-核查结果.xlsx');window.$message?.success('导出成功!');}operateLoading.value = false;worker.terminate(); // 终止 Worker};worker.onerror = (error) => {console.error('Worker error:', error);operateLoading.value = false;worker.terminate(); // 终止 Worker};

export-worker.ts

import * as XLSX_STYLE from 'xlsx-js-style';interface Column {name: string;headerText: string;
}interface Data {columns: Column[];data: any[][];
}interface ExportMessage {t: string;v: any;
}self.onmessage = async (event: MessageEvent) => {const { data }: { data: Data } = event.data;// 这里放置处理导出逻辑的代码const highlightFields: string[][] = [];const problemFieldsIndex: number = data.columns.findIndex(col => col.name === 'ProblemFields');// 移除 ProblemFields 字段if (problemFieldsIndex !== -1) {data.columns.splice(problemFieldsIndex, 1);}const formattedData = data.data.map((row: any[]) => {const problemFields = row[problemFieldsIndex];highlightFields.push(problemFields.split(','));row.splice(problemFieldsIndex, 1);// const rowData: { [key: string]: any } = {};// data.columns.forEach((col: Column, index: number) => {//   rowData[col.headerText] = row[index];// });return row;});const BATCH_SIZE = 30000; // 定义每批处理的数据大小// 添加标题行const header = data.columns.map(col => col.headerText);// 设置样式const headerCellStyle = {font: { name: 'Arial', sz: 10, bold: true, color: { rgb: "FFFFFF" } },  // 白色字体fill: { fgColor: { rgb: "808080" } }, // 灰色背景alignment: { vertical: 'center', horizontal: 'center' }};const cellStyle = {font: { name: 'Arial', sz: 10 },alignment: { vertical: 'center', horizontal: 'center', wrapText: true }};const highlightStyle = {fill: { fgColor: { rgb: "FFFF00" } }, // 黄色背景font: { name: '宋体', sz: 11 },alignment: { vertical: 'center', horizontal: 'center', wrapText: true },border: {top: { style: 'thin', color: { rgb: "C3CBDD" } },bottom: { style: 'thin', color: { rgb: "C3CBDD" } },left: { style: 'thin', color: { rgb: "C3CBDD" } },right: { style: 'thin', color: { rgb: "C3CBDD" } }}};const ws = [];for (let i = 0; i < formattedData.length; i += BATCH_SIZE) {const worksheet = XLSX_STYLE.utils.aoa_to_sheet([header], { origin: 'A1' }); // 创建一个空工作表const batchData = formattedData.slice(i, i + BATCH_SIZE);// 添加批量数据到工作表末尾XLSX_STYLE.utils.sheet_add_aoa(worksheet, batchData, { skipHeader: true, origin: -1 });// 设置列宽、行高和样式// 设置每列的宽度(单位:字符)const wsCols: { wch: number }[] = new Array(data.columns.length).fill({ wch: 30 });worksheet['!cols'] = wsCols;worksheet['!cols'][0] = { wch: 50 };// 设置行高(单位:像素,通常建议设置为 20 或更高)worksheet['!rows'] = new Array(batchData + 1).fill({ hpt: 50 });worksheet['!rows'][0] = { hpt: 25 };// 应用样式到表头和普通单元格for (const col in worksheet) {if (col[0] === '!') continue; // 跳过元数据const cell = worksheet[col];// 设置表头样式if (data.columns.some(header => header.headerText === cell.v)) {cell.s = headerCellStyle;} else {cell.s = cellStyle; // 设置普通单元格样式}}// 根据 ProblemFields 高亮单元格batchData.forEach((row, rowIndex) => {const globalRowIndex = i + rowIndex; // 计算全局行索引highlightFields[globalRowIndex].forEach(problemField => {const colIndex = data.columns.findIndex(col => col.name === problemField); // 找到对应的列索引if (colIndex !== -1) {const cellRef = XLSX_STYLE.utils.encode_cell({ c: colIndex, r: rowIndex + 1 }); // 行号加1因为第一行为表头if (worksheet[cellRef]) {worksheet[cellRef].s = highlightStyle; // 应用高亮样式}}});});ws.push(worksheet);}// const worksheet = XLSX_STYLE.utils.json_to_sheet(formattedData, { header: data.columns.map(col => col.headerText) });const workbook = XLSX_STYLE.utils.book_new();const min = formattedData.length > BATCH_SIZE ? BATCH_SIZE : formattedData.length;ws.forEach((worksheet: any) => {XLSX_STYLE.utils.book_append_sheet(workbook, worksheet);});console.log("准备写入")const val = XLSX_STYLE.write(workbook, { type: "array", bookType: "xlsx", bookSST: true, compression: true });console.log("写入完成")self.postMessage({ t: "export", v: val } as ExportMessage);
};

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

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

相关文章

DASCTF 2024金秋十月赛RE题wp

目录 RE1&#xff1a;ezRERE2&#xff1a;ezelfRE3&#xff1a;ezAndroid 3题RE&#xff0c;差一点就AK了&#xff0c;可能好久没打比赛了&#xff0c;技能有所下降&#xff0c;还是需要经常摸一摸工具。 RE1&#xff1a;ezRE 执行的时候dump出来&#xff0c;然后静态分析 发…

深入理解Spring Boot的事务注解及其实现原理

深入理解Spring Boot的事务注解及其实现原理 在现代企业级应用开发中&#xff0c;事务管理是一个至关重要的概念。Spring Boot 提供了强大的事务管理功能&#xff0c;使得开发者可以轻松地管理数据库事务。本文将详细介绍Spring Boot中的事务注解及其实现原理。 1. 什么是事务…

Java项目-基于springboot框架的游戏分享系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…

[ACTF2020] 新生赛]Exec1

目录 0x01命令执行 [ACTF2020 新生赛]Exec1 1、解法1 2、解法2 3、总结 3.1php命令注入函数 3.2java命令注入函数 3.3常见管道符 0x02SQL注入 [极客大挑战 2019]EasySQL1 0x01命令执行 [ACTF2020 新生赛]Exec1 1、解法1 ping本地&#xff0c;有回显&#xff0c;TTL…

红队-安全见闻篇(上)

声明 学习视频来自B站UP主 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一.编程与开发 1.后端语言学习 C语⾔&#xff1a;⼀种通⽤的…

Pytest-Bdd-Playwright 系列教程(1):从零开始教你写自动化测试框架「喂饭教程」

Pytest-Bdd-Playwright 系列教程&#xff08;1&#xff09;&#xff1a;从零开始教你写自动化测试框架「喂饭教程」 前言一、项目结构二、安装依赖三、BDD特性文件四、页面对象五、步骤定义六、测试脚本七、Pytest配置八、运行测试 前言 最近收到一些小伙伴在后台的留言&#x…

生成式AI时代的内容安全与系统构建:合合信息文档图像篡改检测创新方案

目录 一、生成式AI时代的内容安全与图像识别1.图像内容安全的重要性2.伪造文档与证件检测的应用场景3.人脸伪造检测技术 二、系统构建加速与文档解析1.TextIn文档解析平台2.TextIn文档解析输出的示例 三、合合信息的行业影响力总结 一、生成式AI时代的内容安全与图像识别 随着…

python-----函数详解(一)

一、概念及作用&#xff1a; 概念&#xff1a;由若干条语句组成语句块&#xff0c;其中包括函数名称、参数列表&#xff0c;它是组织代码的最小单元&#xff0c;完成一定的功能 作用&#xff1a;把一个代码封装成一个函数&#xff0c;一般按功能组织一段代码 目的就是为了重…

autMan奥特曼机器人-安装或更新golang依赖

autMan2.3.4及以上需要更新中间件或安装golang依赖&#xff0c;参照下列步骤&#xff1a; 一、直装版本 ssh下进入autMan文件夹下plugin/scripts下面输入以下指令&#xff1a; go get -u github.com/hdbjlizhe/middleware二、docker版本 从后台进入web终端&#xff0c;依次输入…

速盾:高防cdn的好处体现在什么地方?

随着互联网的迅猛发展&#xff0c;网络安全问题也日益受到关注。为了保护网站免受恶意攻击和DDoS攻击的影响&#xff0c;许多网站选择使用高防CDN&#xff08;Content Delivery Network&#xff09;服务。高防CDN的好处体现在以下几个方面。 首先&#xff0c;高防CDN可以有效防…

Ubuntu 上安装 Redmine 5.1 指南

文章目录 官网安装文档&#xff1a;命令步骤相关介绍GemRubyRailsBundler 安装 Redmine更新系统包列表和软件包&#xff1a;安装必要的依赖&#xff1a;安装 Ruby&#xff1a;安装 bundler下载 Redmine 源代码&#xff1a;安装 MySQL配置 Redmine 的数据库配置文件&#xff1a;…

Hudi 核心知识点详解

‌数据写入‌&#xff1a; ‌近实时写入‌&#xff1a;Hudi支持近实时写入&#xff0c;可以减少碎片化工具的使用&#xff0c;并通过CDC&#xff08;Change Data Capture&#xff09;增量导入RDBMS数据。此外&#xff0c;Hudi还限制小文件的大小和数量&#xff0c;优化存储效率…

Java开发者的成长轨迹:从入门到权威的二十年征程

在Java开发的漫长征途中&#xff0c;流传着一句耳熟能详的话&#xff1a;“三年入门&#xff0c;五年入行&#xff0c;十年精英&#xff0c;十五年专家&#xff0c;二十年权威”。这句话不仅是对Java开发者职业生涯的高度概括&#xff0c;更是对技术成长路径的一种深刻洞察。它…

Node.js:深入探秘 CommonJS 模块化的奥秘

在Node.js出现之前&#xff0c;服务端JavaScript基本上处于一片荒芜的境况&#xff0c;而当时也没有出现ES6的模块化规范。因此&#xff0c;Node.js采用了当时比较先进的一种模块化规范来实现服务端JavaScript的模块化机制&#xff0c;它就是CommonJS&#xff0c;有时也简称为C…

2024ideaUI切换和svn与git的切换,svn的安装和配置,idea集成svn ,2024-10-18日

2024-10-18日 2024的UI实在很不舒服&#xff0c;隐藏了很多按键&#xff1b; 第一步&#xff1a; 视图 -》 外观 -》 工具栏选出来&#xff1b; 结果出来&#xff1a; 运行的按键和设置的按钮 第二步 点击设置的按钮&#xff0c;选择最后一个&#xff0c;重启就行 结果 舒服&…

前端-基础CSS总结常用

1.书写位置:title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码。 <title>CSS 初体验</title> <style>/* 选择器 { } */p {/* CSS 属性 */color: red;} </style><p>体验 CSS</p> <link rel="stylesheet" href=…

论文阅读(二十四):SA-Net: Shuffle Attention for Deep Convolutional Neural Networks

文章目录 Abstract1.Introduction2.Shuffle Attention3.Code 论文&#xff1a;SA-Net&#xff1a;Shuffle Attention for Deep Convolutional Neural Networks(SA-Net&#xff1a;置换注意力机制)   论文链接&#xff1a;SA-Net&#xff1a;Shuffle Attention for Deep Convo…

【NodeJS】NodeJS+mongoDB在线版开发简单RestfulAPI (二):项目文件夹架构及路由的设置

本项目旨在学习如何快速使用 nodejs 开发后端api&#xff0c;并为以后开展其他项目的开启提供简易的后端模版。&#xff08;非后端工程师&#xff09; 由于文档是代码写完之后&#xff0c;为了记录项目中需要注意的技术点&#xff0c;因此文档的叙述方式并非开发顺序&#xff0…

九州未来亓绚亮相丽台Solution Day 2024,共建AI赋能教育新时代

在数字化浪潮席卷全球的当下&#xff0c;生成式人工智能正迅速渗透至数字世界的每一个角落&#xff0c;而AI技术的物理化应用也正成为新的趋势。10月22日&#xff0c;丽台解决方案日Solution Day 2024&#xff1a;物理AI推动行业数字变革在上海绿地外滩中心顺利举行。 大会聚焦…

SpringBoot项目整合Mybatis-MySql数据库编程

1.Mybatis-MySql 话不多说-直接上代码&#xff01; 1. 数据库编程的依赖 <!-- Mybatis整合Spring Boot的依赖项 --> <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><…