Vue中项目进行文件压缩与解压缩 (接口返回文件的url压缩包前端解析并展示出来,保存的时候在压缩后放到接口入参进行保存)

安装   npm install pako在Vue组件中引入pako:
import pako from 'pako';接口返回的url是这个字段 tableSsjsonUrl  其实打开就是压缩包const source = await tableFileUrl ({ id: this.$route.query.id}); if(source.code === 0) {this.titleName  = source.data.tableName}
if(source.code === 0 && source.data.tableSsjsonUrl) {const fileUrl = source.data.tableSsjsonUrlfetch(fileUrl, {headers: {'Cache-Control': 'no-cache'}}).then(response => response.blob()).then(blob => {const reader = new FileReader();reader.onload = () => {const compressedData = new Uint8Array(reader.result);const decompressedData = pako.ungzip(compressedData, { to: 'string' });this.spread.fromJSON(JSON.parse(decompressedData));};reader.readAsArrayBuffer(blob);}).catch(error => {console.error('Failed to fetch file:', error);});
}压缩传参如下let spreadJSON = JSON.stringify(this.spread.toJSON({ }));const uint8Array = new TextEncoder().encode(spreadJSON);// 进行gzip压缩const compressedData = pako.gzip(uint8Array);// 将压缩后的数据转换成Blob类型并下载// const blob = new Blob([compressedData], { type: 'application/gzip' });//     saveAs(blob, 'example.gz');// 创建FormData对象const formData = new FormData();// 将压缩后的数据作为FormData的一部分formData.append('file', new Blob([compressedData]));formData.append('id', this.$route.query.id);console.log(formData.get('file'), '9999999999')try {// designInfoUpdateconst res = await updateTableFileGzip(formData);if (res.code === 0) {this.$modal.msgSuccess('保存成功!')} else {// this.$modal.msgError15('保存失败!')}} catch (error) {// this.$modal.msgError15('保存失败!')}

参考链接  Vue中如何进行文件压缩与解压缩?_vue压缩文件_毕设徐师兄的博客-CSDN博客

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

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

相关文章

ES之x-pack-core-7.14.2许可证修改为白金版

X-Pack是什么 X-pack是elasticsearch的一个扩展包,将安全,警告,监视,图形和报告功能捆绑在一个易于安装的软件包中,虽然x-pack被设计为一个无缝的工作,但是你可以轻松的启用或者关闭一些功能。 主要分一下步…

WebSocket 鉴权策略与技巧详解

WebSocket 作为实时通信的利器,越来越受到开发者的青睐。然而,为了确保通信的安全性和合法性,鉴权成为不可或缺的一环。本文将深入探讨 WebSocket 的鉴权机制,为你呈现一揽子的解决方案,确保你的 WebSocket 通信得心应…

【Qt之QTextDocument】使用及表格显示富文本解决方案

【Qt之QTextDocument】使用 描述常用方法及示例使用QTextList使用QTextBlock使用QTextTable表格显示富文本结论 描述 QTextDocument类保存格式化的文本。 QTextDocument是结构化富文本文档的容器,支持样式文本和各种文档元素,如列表、表格、框架和图像。…

CANopen协议【SDO】

SDO: SDO是读写单个寄存器。主要用于配置伺服驱动器参数。 1 收发功能: //public unsafe struct VCI_CAN_OBJ //CAN数据帧 【单帧对象】//{// public uint ID;// 帧ID。 【11bit】数据右对齐。 详情请参照: 《8.附件1&#xff1…

Python 模块

目录 模块 6.1. 模块详解 6.1.1. 以脚本方式执行模块 6.1.2. 模块搜索路径 6.1.3. “已编译的” Python 文件 6.2. 标准模块 6.3. dir() 函数 6.4. 包 6.4.1. 从包中导入 * 6.4.2. 相对导入 6.4.3. 多目录中的包 模块 退出 Python 解释器后,再次进入时&a…

手把手教你安装 Visual Studio 2022 及其简单使用

软件下载 打开 Visual Studio 官网,个人选择免费的Community社区版就够用了。 软件安装 双击运行安装程序: 点击继续 即可: 等待加载完成: 可以看到 Visual Studio 2022 对应不同的开发需求提供了若干工作负载,这里以…

​3ds Max插件CG MAGIC图形板块为您提升线条效率!

​通过3ds Max软件进行绘图操作时,大多绊住各位设计师们作图速度的往往都是一些细微的琐事,重复一变一变的调整修改等问题。 今天说到这个绘图线条来回调整解决方法就是3ds Max插件CG MAGIC。 Max插件CG MAGIC作为一款智能化的辅助插件,致力于…

flutter编译和构建鸿蒙应用程序(windows环境)

flutter编译和构建鸿蒙应用程序(windows环境) 问题背景 针对 OpenHarmony 的 Flutter 版本已经开源,参考 https://gitee.com/openharmony-sig/flutter_flutter。 本文为实践该流程,实现flutter打包鸿蒙hap包的流程。目前流程已经…

flink的java.lang.IllegalStateException: Buffer pool is destroyed 异常

背景 最近flink的在线应用出现错误java.lang.IllegalStateException: Buffer pool is destroyed,本文记录下这个错误的原因 错误原因 详细的日志堆栈如下: Caused by: java.lang.IllegalStateException: Buffer pool is destroyed. at org.apache.flink.runtime…

Ps:画笔工具的基本操作

画笔工具 Brush Tool是 Ps 中最常用的工具,广泛地用于绘画与修饰工作。 虽然多数操作可在画笔工具的工具选项栏中选择执行,但是如果能记住相应的快捷键可大大提高工作效率。 熟练掌握画笔工具的操作对于使用其他工具也非常有益,因为 Ps 中许多…

CSS-长度单位篇

px:像素em:相对元素font-size的倍数rem:相对根字体大小,html标签就是根%:相对父元素计算 注意:CSS中设置长度,必须加单位,否则样式无效!

Maven - 打包之争:Jar vs. Shade vs. Assembly

文章目录 Pre概述Jar 打包方式_maven-jar-pluginOverview使用官方文档 Shade 打包方式_maven-shade-pluginOverview使用将部分jar包添加或排除将依赖jar包内部资源添加或排除自动将所有不使用的类排除将依赖的类重命名并打包进来 (隔离方案)修改包的后缀…

ElasticSearch之cat component templates API

命令样例如下: curl -X GET "https://localhost:9200/_cat/component_templates?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下: name …

Qt/QML编程学习之心得:一个QML工程的学习笔记(十)

前言: 到底什么是Qt Quick呢?因为Qt Quick是Qt新引入的,Qt Quick由Qt Quick模块提供,它是一个编写QML应用的标准库。Qt Quick模块提供了两种接口:使用QML语言创建应用的QML接口和使用C++语言扩展QML的C++接口。使用Qt Quick模块,设计人员和开发人员可以轻松地构建流畅的…

【自主探索】基于 frontier_exploration 的单个机器人自主探索建图

文章目录 一、概述1、功能2、要求 二、使用方法1、用于运行演示2、用于开发人员2.1. 探索无/地图数据2.2. 使用 /map 数据进行探索 三、提供的组件1、explore_client1.1. 调用的操作1.2. 订阅主题1.3. 发布主题 2、explore_server2.1. 提供的操作2.2. 调用的操作2.3. 调用的服务…

【科技素养】蓝桥杯STEMA 科技素养组模拟练习试卷6

1、将一个空塑料袋与一个装满空气的塑料袋放到秤上称重。在两个塑料袋本身完全一样的情况下,得出的结果会是 A、空塑料袋更重 B、装满空气的塑料袋更重 C、两个塑料袋一样重 D、无法判断 答案:C 2、全球变暖带来的一个主要影响就是海平面的上升。造…

web前端开发基础----标准流布局和非标准流布局

1,标准流布局 标准流,也称文档流或普通流,是所有元素默认的布局方式。 在标准流中,元素按照其在 HTML 中出现的顺序,自上而下依次排列,并占据其父容器内的可用空间。 标准流中的元素按照其自然尺寸和位置进…

uniapp实现多时间段设置

功能说明&#xff1a; 1 点击新增时间&#xff0c;出现一个默认时间段模板&#xff0c;不能提交 2 点击“新增时间文本”&#xff0c;弹出弹窗&#xff0c;选择时间&#xff0c;不允许开始时间和结束时间同时为00:00&#xff0c; <view class"item_cont"> …

TCP/IP协议:最流行的电子邮件协议SMTP(简单邮件传输协议)详解

SMTP 是一种电子邮件协议&#xff0c;用于通过互联网从一个电子邮件帐户向另一个电子邮件帐户发送电子邮件。它是TCP/IP协议应用层的一部分。作为一种电子邮件协议&#xff0c;它建立了不同电子邮件客户端和帐户之间轻松信息交换的规则。这样&#xff0c;简单邮件传输协议就可以…

求最小的起始正整数

题目描述 给你一个整数数组 nums 。你可以选定任意的 正数 startValue 作为初始值。 你需要从左到右遍历 nums 数组&#xff0c;并将 startValue 依次累加上 nums 数组中的值。 请你在确保累加和始终大于等于 1 的前提下&#xff0c;选出一个最小的 正数 作为 startValue 。…