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.pswp.cn/news/168093.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/168093.shtml
英文地址,請注明出處:http://en.pswp.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 。…