前端:多服务端接口资源整合与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.mzph.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;其中两人先后被封为重新恢复的韩国的国王。 一个是横阳君韩…

大模型上下文长度扩展中的检索增强技术简述

基于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请求延迟 设定超时时间 设定重试超时 设定随机改变的参数值 利用正则过滤目标网址 避免过多的…

前端笔记-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…

Vite: 高阶特性 Pure ESM

概述 ESM 已经逐步得到各大浏览器厂商以及 Node.js 的原生支持&#xff0c;正在成为主流前端模块化方案。 而 Vite 本身就是借助浏览器原生的 ESM 解析能力( type“module” )实现了开发阶段的 no-bundle &#xff0c;即不用打包也可以构建 Web 应用。不过我们对于原生 ESM 的…

综合评价类模型——突变级数法

含义 首先&#xff1a;对评价目标进行多层次矛盾分解其次&#xff1a;利用突变理论和模糊数学相结合产生突变模糊隶属函数再次&#xff1a;由归一公式进行综合量化运算最终&#xff1a;归一为一个参数&#xff0c;即求出总的隶属函数&#xff0c;从而对评价目标进行排序分析特点…

成都市水资源公报(2000-2022年)

数据年限&#xff1a;2000-2022年&#xff0c;无2009年 数据格式&#xff1a;pdf、word、jpg 数据内容&#xff1a;降水量、地表水资源量、地下水资源量、水资源总量、蓄水状况、平原区浅层地下水动态、水资源情况分析、供水量、用水量、污水处理、洪涝干旱等