vue blob实现自定义多sheet数据导出到excel文件

背景:最近vue项目遇到一个需求,就是需要将多个表格分成不同sheet页并导出,之前的工具类只能导出一个sheet页,所以在原有的基础上,调整一下,让它支持多sheet导出。

  1. vue blob文件流,这个肯定要的,这个百度一下都有,下面贴出来

(function (view) {view.URL = view.URL || view.webkitURL;if (view.Blob && view.URL) {try {new Blob;return;} catch (e) {}}// Internally we use a BlobBuilder implementation to base Blob off of// in order to support older browsers that only have BlobBuildervar BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {varget_class = function(object) {return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];}, FakeBlobBuilder = function BlobBuilder() {this.data = [];}, FakeBlob = function Blob(data, type, encoding) {this.data = data;this.size = data.length;this.type = type;this.encoding = encoding;}, FBB_proto = FakeBlobBuilder.prototype, FB_proto = FakeBlob.prototype, FileReaderSync = view.FileReaderSync, FileException = function(type) {this.code = this[this.name = type];}, file_ex_codes = ("NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR").split(" "), file_ex_code = file_ex_codes.length, real_URL = view.URL || view.webkitURL || view, real_create_object_URL = real_URL.createObjectURL, real_revoke_object_URL = real_URL.revokeObjectURL, URL = real_URL, btoa = view.btoa, atob = view.atob, ArrayBuffer = view.ArrayBuffer, Uint8Array = view.Uint8Array;FakeBlob.fake = FB_proto.fake = true;while (file_ex_code--) {FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;}if (!real_URL.createObjectURL) {URL = view.URL = {};}URL.createObjectURL = function(blob) {vartype = blob.type, data_URI_header;if (type === null) {type = "application/octet-stream";}if (blob instanceof FakeBlob) {data_URI_header = "data:" + type;if (blob.encoding === "base64") {return data_URI_header + ";base64," + blob.data;} else if (blob.encoding === "URI") {return data_URI_header + "," + decodeURIComponent(blob.data);} if (btoa) {return data_URI_header + ";base64," + btoa(blob.data);} else {return data_URI_header + "," + encodeURIComponent(blob.data);}} else if (real_create_object_URL) {return real_create_object_URL.call(real_URL, blob);}};URL.revokeObjectURL = function(object_URL) {if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {real_revoke_object_URL.call(real_URL, object_URL);}};FBB_proto.append = function(data/*, endings*/) {var bb = this.data;// decode data to a binary stringif (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {varstr = "", buf = new Uint8Array(data), i = 0, buf_len = buf.length;for (; i < buf_len; i++) {str += String.fromCharCode(buf[i]);}bb.push(str);} else if (get_class(data) === "Blob" || get_class(data) === "File") {if (FileReaderSync) {var fr = new FileReaderSync;bb.push(fr.readAsBinaryString(data));} else {// async FileReader won't work as BlobBuilder is syncthrow new FileException("NOT_READABLE_ERR");}} else if (data instanceof FakeBlob) {if (data.encoding === "base64" && atob) {bb.push(atob(data.data));} else if (data.encoding === "URI") {bb.push(decodeURIComponent(data.data));} else if (data.encoding === "raw") {bb.push(data.data);}} else {if (typeof data !== "string") {data += ""; // convert unsupported types to strings}// decode UTF-16 to binary stringbb.push(unescape(encodeURIComponent(data)));}};FBB_proto.getBlob = function(type) {if (!arguments.length) {type = null;}return new FakeBlob(this.data.join(""), type, "raw");};FBB_proto.toString = function() {return "[object BlobBuilder]";};FB_proto.slice = function(start, end, type) {var args = arguments.length;if (args < 3) {type = null;}return new FakeBlob(this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding);};FB_proto.toString = function() {return "[object Blob]";};FB_proto.close = function() {this.size = this.data.length = 0;};return FakeBlobBuilder;}(view));view.Blob = function Blob(blobParts, options) {var type = options ? (options.type || "") : "";var builder = new BlobBuilder();if (blobParts) {for (var i = 0, len = blobParts.length; i < len; i++) {builder.append(blobParts[i]);}}return builder.getBlob(type);};
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
  1. Ex2ExcelUtils.js,导出工具类
require('script-loader!file-saver');
require('./Blob');
require('script-loader!xlsx/dist/xlsx.core.min');/*** 支持多sheet* @param sheetNames* @param ths 表头* @param jsonDatas 数据* @param defaultTitle*/
export function export_data_to_excel(sheetNames, ths, jsonDatas, defaultTitle) {var wb = new Workbook()for(let index in sheetNames){let th = ths[index]var data = deepCopy(jsonDatas[index]);data.unshift(th);var ws_name = sheetNames[index];var ws = sheet_from_array_of_arrays(data);//================表格宽度自适应====================/*设置worksheet每列的最大宽度*/const colWidth = data.map(row =>row.map(val => {/*先判断是否为null/undefined*/if (val == null || val == undefined || val == "") {return {wch: 10};} else if (val.toString().charCodeAt(0) > 255) {/*再判断是否为中文*/return {wch: val.toString().length * 2};} else {return {wch: val.toString().length * 1.4};}}));/*以主表第二行为初始值,因为我的第一行是表格标题,会比较长,所以以主表第二行为初始值*/let result = colWidth[1];for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]["wch"] < colWidth[i][j]["wch"]) {result[j]["wch"] = colWidth[i][j]["wch"];}}}ws["!cols"] = result;//====================表格宽度自适应-结束=================wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;}var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), defaultTitle + ".xlsx")
}function datenum(v, date1904) {if (date1904) v += 1462;var epoch = Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}function sheet_from_array_of_arrays(data, opts) {var ws = {};var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r = R;if (range.s.c > C) range.s.c = C;if (range.e.r < R) range.e.r = R;if (range.e.c < C) range.e.c = C;var cell = {v: data[R][C]};if (cell.v == null) continue;var cell_ref = XLSX.utils.encode_cell({c: C, r: R});if (typeof cell.v === 'number') cell.t = 'n';else if (typeof cell.v === 'boolean') cell.t = 'b';else if (cell.v instanceof Date) {cell.t = 'n';cell.z = XLSX.SSF._table[14];cell.v = datenum(cell.v);}else cell.t = 's';ws[cell_ref] = cell;}}if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);return ws;
}function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {};
}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;
}
  1. 上述两个文件,放在同一个目录下,以下是调用示例
// 文件名
const excelName = '多sheet页数据导出'
// 声名每个sheet页的名称
let sheetNames = ['sheet1', 'sheet2', 'sheet3']
// 每个sheet页的表头
let ths = [[], [], []]
// 每个sheet页的数据内容
let jsonDatas = [[], [], []]// sheet1
ths[0] = ['表头A1', '表头A2', '表头A3', '表头A4']
jsonDatas[0] = [['值A1', '值A2', '值A3', '值A4'],['值B1', '值B2', '值B3', '值B4']]
// sheet2
ths[1] = ['表头A11', '表头A21', '表头A31', '表头A41']
jsonDatas[1] = [['值A11', '值A21', '值A31', '值A41'],['值B11', '值B21', '值B31', '值B41']]
// sheet3
ths[2] = ['表头A12', '表头A22', '表头A32', '表头A42']
jsonDatas[2] = [['值A12', '值A22', '值A32', '值A42'],['值B12', '值B22', '值B32', '值B42']]const { export_data_to_excel} = require('./Ex2ExcelUtils')
export_data_to_excel(sheetNames, ths, jsonDatas, excelName)

最后:前端或后端导出文件,可以看自己需求。数据量比较少的时候,或页面展示的是所有数据的时候,使用前端js直接导出文件,比较方便,因为不用重查接口,减少了交互。若数据量比较大,或页面展示的是分页时,推荐走后端接口导出文件,因为没法拿到完整的数据,而且大数据量从接口返回到前端,对前端负担也不友好。

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

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

相关文章

apexcharts数据可视化之圆环柱状图

apexcharts数据可视化之圆环柱状图 有完整配套的Python后端代码。 本教程主要会介绍如下图形绘制方式&#xff1a; 基础圆环柱状图多组数据圆环柱状图图片背景自定义角度渐变半个圆环图虚线圆环图 基础圆环图 import ApexChart from react-apexcharts;export function Cir…

【工具免费】喜马拉雅 x2m转m4a,xm转mp3的简单方法!

喜马拉雅.xm文件转MP3&#xff0c;阿星来帮忙了&#xff01; 大家好&#xff0c;今天咱们来聊聊一个超级实用的小技巧&#xff0c;特别是对于那些喜马拉雅的忠实听众来说&#xff0c;这绝对是个福音&#xff01; 阿星发现&#xff0c;很多小伙伴们下载的喜马拉雅文件都是.xm格…

[深度学习]yolov10+bytetrack+pyqt5实现目标追踪

【简介】 利用YOLOv10、ByteTrack和PyQt5实现目标追踪是一个强大的组合&#xff0c;可以为用户提供一个交互式的实时目标追踪界面。以下是一个简化版的实现思路描述&#xff1a; 首先&#xff0c;YOLOv10是一个先进的目标检测算法&#xff0c;能够准确识别视频或图像中的目标…

CS61C | lecture2

# CS61C | lecture2 C 语言是一种编译语言。C 编译器将 C 程序映射到特定与体系结构的机器代码(实际上是一串 0 和 1)。 而 Java 会通过 JVM(Java 虚拟机) 将代码转换为独立于架构的字节码。 Python 则会直接解释代码。C 不会直接解释代码&#xff0c;而是将其编译成机器代码之…

ollama入门系列教程简介与目录

教程简介 Ollama教程系列是为那些希望深入了解并掌握Ollama框架的开发者设计的。通过这一系列的教程,用户将学习如何从基础设置到高级功能的各个方面,有效地在Ollama平台上开发和部署大型语言模型。本系列包括如何将模型导入Ollama框架、利用与OpenAI兼容的API、以及如何使用…

OceanBase开发者大会实录-李楠:4条路径+6大方案,关键业务系统数据库的升级之路

本文来自2024 OceanBase开发者大会&#xff0c;OceanBase 金融与政企事业部解决方案总监李楠的演讲实录 ——《关键业务系统分布式数据库升级路线选择和技术演进之路》。完整视频回看&#xff0c;请点击这里&#xff1e;> 大家好&#xff0c;我是 OceanBase 金融与政企事业部…

知网AI查重:AI工具如何助力通过检测?

论文降重一直是困扰各界毕业生的“拦路虎”&#xff0c;还不容易熬过修改的苦&#xff0c;又要迎来降重的痛。 其实想要给论文降重达标&#xff0c;我有一些独家秘诀。话不多说直接上干货&#xff01; 1、同义词改写&#xff08;针对整段整句重复&#xff09; 这是最靠谱也是…

Zigbee +PC上位机 无线控制二维云台开发笔记

今日尝试开发一款简单好学的PC上位机无线控制二维云台的小试验品&#xff1a; 主要开发环境与工具介绍&#xff1a; 单片机 STM32F103C8T6 使用标准库函数编程 Visual Studio 2022软件C# Winform 开发 上位机控制软件 DL_20 无线串口模块 &#xff0b; USB-TTL 模块 实现无线通…

【3d】Real-Time Rendering 3rd 笔记1:图形渲染管线

图形渲染管线的主要功能 图形渲染管线的主要功能就是决定在给定虚拟相机、三维物体、光源、照明模式,以及纹理等诸多条件的情况下,生成或绘制一幅二维图像的过程。在概念上可以将图形渲染管线分为三个阶段:应用程序阶段、几何阶段、光栅化阶段。2.3.1应用程序阶段 应用程序阶…

留给“端侧大模型”的时间不多了

端侧大模型&#xff08;Edge AI models&#xff09;&#xff0c;也就是只在设备本地&#xff08;如智能手机、IoT设备、嵌入式系统等&#xff09;运行的大模型&#xff0c;过去一两年来非常流行。 具体表现在&#xff0c;终端设备厂商&#xff0c;如苹果、荣耀、小米、OV等&…

系统开发-性能调优-主要包括哪些问题

Java性能调优过程中遇到的问题种类繁多&#xff0c;涉及硬件、JVM配置、代码优化等多个层面。以下列举几个常见的Java性能调优问题&#xff0c;并按类别归纳&#xff1a; 一、JVM配置与调优 GC&#xff08;垃圾回收&#xff09;问题&#xff1a; Full GC频繁发生CMS GC无法回…

android手机安装tfcenter软件(使用termux非root模式)

1、下载termux app软件并安装 Termux官方地址&#xff1a; Termux | The main termux site and help pages. 2、打开Termux并下载tfcenter install.sh脚本 执行curl命令&#xff1a; curl -sS http://47.122.18.150:10000/install.sh -o install.sh 3、通过install.sh 输入…

多线程和多进程的快速入门

多线程和多进程的快速入门 学习自&#xff1a;莫烦Python www.mofanpy.com Threading - 多线程运算python程序 ​ 多线程的简单理解&#xff1a;把数据分成很多段&#xff0c;将每一段数据放入一个线程&#xff0c;将所有的线程同时开始&#xff0c;大大的节省了运算时间。相…

如何利用exceljs将data数据导出表格实现日期去重,同时保留对应日期的每一列数据

const data [{ deviceId: 1, name: "B相电压", signalTypeId: 1, ts: "2024-05-13 12:10:06", unit: "kV", 1: 39.37936, value:39.37936, },{ deviceId: 1, name: "A相电压", signalTypeId: 2, ts: "2024-05-13 12:11:06"…

springboot基本使用十二(PageHelper分页查询)

引入依赖&#xff1a; <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.3.0</version> </dependency> 通个PageHelper.startPage(page,pageSize)方…

代码随想录算法训练营day42 | 62.不同路径、63. 不同路径 II

62.不同路径 确定dp数组及其下标的含义&#xff1a;dp[i][j]代表机器人到达i行j列时不同的路径数确定递推公式&#xff1a;dp[i][j] dp[i-1][j] dp[i][j-1]dp数组的初始化&#xff1a;dp[0][j] 1 dp[i][0] 1确定遍历顺序&#xff1a;从前向后举例推导dp数组 class Soluti…

nuxt3的一些知识点,持续更新

1.npx nuxilatest init xx 命令执行失败 ERROR Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed 解决办法&#xff1a;host加上 185.199.108.…

“仿RabbitMQ实现消息队列”---整体架构与模块说明

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、概念性框架理解 我们主要实现的内容&#xff1a; 1.Broker服务器&#xff1a;消息队列服务器&#xff08;服务端&…

连通块中点的数量-java

本次我们通过连通块中点的数量来加深我们对并查集的基本操作和原理&#xff0c;并且知道如何在并查集中添加附属信息。 目录 前言☀ 一、连通块中点的数量☀ 二、算法思路☀ 1.无向图&#x1f319; 2.在a b之间连一条边&#xff0c;a b可能相等&#x1f319; 3.询问a和b是否在一…

Apache POI对Excel进行读写操作

1、什么是Apache POI ​ Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。一般情况下&#xff0c;POI 都是用于操作 Excel 文件。 Apache POI 的应用场景&…