前端:多服務端接口資源整合與zip打包下載

項目需求

        前端項目開發中,有一個頁面需要去整合多個服務接口返回的數據資源,并且需要將這多個服務接口接口返回的數據進行資源壓縮,最終打包成zip壓縮包,并在客戶端完成下載。

        基本需求梳理如下,

實現思路

        這個需求點其實本質上還是傳統的“文件下載”功能需求,常見的例如:excel導出、報表導出等,通常會在服務端優先將數據資源整理好,最終形成一個可供前端調用的接口,以文件流的形式實現文件的下載。

        如上圖所示,此處涉及到多個服務接口,該需求點的實現,不再依賴于后端,而是要在前端先做數據資源整合,對數據進行與處理之后,再完成頁面渲染、zip文件導出,壓力給到了前端。

JSZip

         GitHub地址:How to use JSZip

        JSZip是一個用于創建、讀取和編輯zip文件的JavaScript腳本庫,在瀏覽器的兼容性方面也做的十分友好,

瀏覽器兼容性:摘自官網

        An instance of JSZip represents a set of files. You can add them, remove them, modify them. You can also import an existing zip file or generate one.

        如上所述,JSZip實例表示一個文件集合,可以對其進行文件的添加、移除、修改操作,也可以基于一個已有的zip文件來生成。

安裝

        JSZip安裝方式如下,可以按需食用,

        With npm : npm install jszip

        With bower : bower install Stuk/jszip

        With component : component install Stuk/jszip

        Manually : download JSZip and include the file dist/jszip.js or dist/jszip.min.js

使用

        JSZip官網給出了一個使用例子,可以實現對txt文件+gif圖片的zip壓縮操作,并通過FileSaver.js完成下載操作。

var zip = new JSZip()

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/38321.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/38321.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/38321.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python使用defaultdict簡化值為list的字典

原始代碼: from typing import Dictrelated_objects_for_fetch: Dict[str, list] {}for key, value in [(k1, v1), (k1, v2), (k2, v2), (k3, v3), (k2, v2)]:if key not in related_objects_for_fetch:related_objects_for_fetch[key] []if value not in (value…

貪心問題(POJ1700/1017/1065)(C++)

一、貪心問題 貪心算法 貪心算法(greedy algorithm),是用計算機來模擬一個「貪心」的人做出決策的過程。這個人十分貪婪,每一步行動總是按某種指標選取最優的操作。而且他目光短淺,總是只看眼前,并不考慮…

第三天:LINK3D核心原理講解【第1部分】

第三天:LINK3D核心原理講解 LINK3D學習筆記 目標 了解LINK3D velodyne64線激光雷達LINK3D質心點提取效果: 分布在車道與墻體的交界處。 課程內容 LINK3D論文精講LINK3D聚合關鍵點提取代碼講解LINK3D描述子匹配代碼講解除了ALOAM的線特征、面特征,還有其他點云特征嗎,是…

如何使用 Postgres 折疊您的堆棧 實現一切#postgresql認證

技術蔓延如何蔓延 假設您正在開發一款新產品或新功能。一開始,您的團隊會列出需要解決的技術問題。有些解決方案您將自行開發(您的秘訣),而其他解決方案您將使用現有技術(可能至少包括一個數據庫)來解決。…

人工智能期末復習筆記(更新中)

分類問題 分類:根據已知樣本的某些特征,判斷一個新的樣本屬于哪種已知的樣本類 垃圾分類、圖像分類 怎么解決分類問題 分類和回歸的區別 1. 邏輯回歸分類 用于解決分類問題的一種模型。根據數據特征或屬性,計算其歸屬于某一類別 的概率P,…

ComfyUI局部重繪的四種方式 (附件工作流在最后)

前言 局部重繪需要在圖片中選擇重繪區域,點擊圖片右擊選擇Open in MaskEditor(在蒙版編輯器中打開),用鼠標描繪出需要重繪的區域 方式一:重繪編碼器 這種方式重繪比較生硬,需要額外搭配使用才行 方式二&…

el-upload 上傳圖片及回顯照片和預覽圖片,文件流和http線上鏈接格式操作

<div v-for"(info, index) in zsjzqwhxqList.helicopterTourInfoList" :key"info.id" >編輯上傳圖片// oss返回線上地址http鏈接格式&#xff1a;<el-form-itemlabel"巡視結果照片":label-width"formLabelWidth"><el…

Cyber Weekly #13

賽博新聞 1、谷歌發布最強開源小模型Gemma-2 本周五&#xff08;6月28日&#xff09;凌晨&#xff0c;谷歌發布最強開源小模型Gemma-2&#xff0c;分別為9B&#xff08;90億&#xff09;和27B&#xff08;270億&#xff09;參數規模&#xff0c;其中9B 模型在多項基準測試中均…

潁川韓氏,來自戰國七雄韓國的豪族

潁川是戰國七雄韓國故土&#xff0c;韓國被秦國滅國后&#xff0c;王公貴族們除了堅決反秦的被殺了外&#xff0c;大部分都留存了下來。這些人在楚、漢反秦戰爭中&#xff0c;成為反秦統一戰線的重要力量&#xff0c;其中兩人先后被封為重新恢復的韓國的國王。 一個是橫陽君韓…

Windows系統下,將nginx注冊為本地服【親測可用】

在Windows系統下&#xff0c;將nginx注冊為本地服務并設置為開機自動運行&#xff0c;可以通過以下步驟進行&#xff1a; 下載Windows Service Wrapper&#xff1a; 訪問 WinSW 項目頁面&#xff0c;下載適用于Windows的版本。 準備nginx&#xff1a; 確保你已經下載并解壓了n…

共有5部手機,如果通過服務器讓1號手機執行打開 “閑魚.js“ 腳本

1.手機端Auto.js腳本&#xff1a; 每部手機需要在連接時發送一個唯一的標識符&#xff08;如設備ID&#xff09;&#xff0c;并接收服務器發送的指令以執行指定的腳本。 // Auto.js腳本連接WebSocket服務器并發送設備ID var WebSocket require(ws); var ws new WebSocket(w…

大模型上下文長度擴展中的檢索增強技術簡述

基于Transformer的語言模型在眾多自然語言處理任務上都取得了十分優異的成績&#xff0c;在一些任務上已經達到SOTA的效果。但是&#xff0c;經過預訓練后&#xff0c;模型能夠較好處理的序列長度就固定下來。而當前的眾多場景往往需要處理很長的上下文&#xff08;如&#xff…

CppTest單元測試框架(更新)

目錄 1 背景2 設計3 實現4 使用4.1 主函數4.2 使用方法 1 背景 前面文章單元測試之CppTest測試框架中講述利用宏ADD_SUITE將測試用例自動增加到測試框架中。但在使用中發現一個問題&#xff0c;就是通過宏ADD_SUITE增加多個測試Suite時&#xff0c;每次運行時都是所有測試Suit…

逆向開發環境準備

JDK安裝 AndroidStudio安裝 默認sdk路徑 C:\Users\Administrator\AppData\Local\Android\Sdk 將platform-tools所在的目錄添加到path C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools 主要目的是使用該目錄下的adb等命令 將tools所在的目錄添加到path C:\Us…

1-5題查詢 - 高頻 SQL 50 題基礎版

目錄 1. 相關知識點2. 例題2.1.可回收且低脂的產品2.2.尋找用戶推薦人2.3.大的國家2.4. 文章瀏覽 I2.5. 無效的推文 1. 相關知識點 sql判斷&#xff0c;不包含null&#xff0c;判斷不出來distinct是通過查詢的結果來去除重復記錄ASC升序計算字符長度 CHAR_LENGTH() 或 LENGTH(…

sqlmap注入詳解

免責聲明:本文僅做分享... 目錄 1.介紹 2.特點 3.下載 4.幫助文檔 5.常見命令 指定目標 請求 HTTP cookie頭 HTTP User-Agent頭 HTTP協議的證書認證 HTTP(S)代理 HTTP請求延遲 設定超時時間 設定重試超時 設定隨機改變的參數值 利用正則過濾目標網址 避免過多的…

Python-爬蟲案例

Python-爬蟲案例 代碼代碼 代碼 import requests import json import threading from queue import Queue import timeclass HeiMaTouTiao:def __init__(self):self.headers {"User-Agent": "Mozilla/5.0 (Windows NT 6.1; WOW64) ""AppleWebKit/53…

前端筆記-day11

文章目錄 01-空間-平移02-視距03-空間旋轉Z軸04-空間旋轉X軸05-空間旋轉Y軸06-立體呈現07-案例-3D導航08-空間縮放10-動畫實現步驟11-animation復合屬性12-animation拆分寫法13-案例-走馬燈14-案例-精靈動畫15-多組動畫16-全民出游全民出游.htmlindex.css 01-空間-平移 <!D…

基于Spring Boot的在線醫療咨詢平臺的設計與實現【附源碼】

基于Spring Boot的在線醫療咨詢平臺的設計與實現 Design and implementation of the computer hardware mall based on Spring Boot Candidate&#xff1a; Supervisor&#xff1a; April 20th, 2024 學位論文原創性聲明 本人鄭重聲明&#xff1a;所呈交的論文是本人在導師…

初中英語優秀作文分析-006How to Deal with the Exam Stress-如何應對考試壓力

更多資源請關注紐扣編程微信公眾號 記憶樹 1 We students are very busy with schoolwork and in the face of many exams every school day. 翻譯 我們學生忙于功課&#xff0c;每個上學日都面臨許多考試。 簡化記憶 考試 句子結構 We students 主語 我們學生&#xf…