jszip批量下载压缩

目的：vue使用jszip批量下载压缩

一、引入依赖

import JSZip from "jszip";
import FileSaver from "file-saver";

二、代码方法

async downloadAllAudio() {const zip = new JSZip();const cache = {};const promises = [];this.downloadData.forEach((item) => {const promise = this.getFile(item.url).then((data) => {const file_name = item.fileName;zip.file(file_name + ".wav", data, { binary: true });cache[file_name] = data;});promises.unshift(promise);});Promise.all(promises).then(() => {zip.generateAsync({ type: "blob" }).then((content) => {saveAs(content, "分割后的音频.zip"); // 利用file-saver保存文件  自定义文件名});});}

getFile(url) {return new Promise((resolve, reject) => {fetch(url).then((data) => {// console.log(data);return data;}).then((res) => {resolve(res.blob());});});},

js 之Fetch 使用

细节叙述见以下链接

基本概念
WindowOrWorkerGlobalScope.fetch()用于获取资源的方法。
Headers表示响应/请求标头，允许您查询它们并根据结果采取不同的操作。
Request表示资源请求。
Response表示对请求的响应。
Fetch API
Fetch API 包含一组类和方法，用来简化 HTTP 请求。其中包含以下方法和类：
fetch 方法：用于发起 HTTP 请求
Request 类：用来描述请求
Response 类：用来表示响应
Headers 类：用来表示 HTTP 头部信息。
基本用法

fetch 接受一个 url 作为参数，发起 GET 请求，返回 Promise ,请求成功后将返回结果封装为一个 Response 对象，该对象上具有一些方法（比如 json 方法），调用 json 方法后同样返回一个 Promise 对象，并用解析 json 字符串得到的对象来 resolve。
1 fetch(‘https://api.github.com/repos/facebook/react’).then(function(res){
2 return res.json();
3 }).then(function(data){
4 console.log(data)
5 });
fetch 方法
fetch 方法有两种调用方法，第一个参数可以是一个 Request 对象，也可以是一个简单的 url，第二个参数是可选参数，包含一些配置信息。

Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);
可选的配置信息可以一个简单对象，可以包含下列字段：

method: 请求的方法, 比如： GET, POST
headers：请求头部信息，可以是一个 Headers 对象的实例，也可以是一个简单对象
body: 任何希望发送的信息，可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。需要注意的是 GET 和 HEAD 方法不能包含 body。
mode：请求的模式，可以取这几个值：cors, no-cors, same-origin, navigate
same-origin：只允许同源的请求，否则直接报错
cors：允许跨域，但也要要求响应中 Access-Control-Allow-Origin 这样的头部信息表示允许跨域，响应中只有部分头部信息可以读取，但响应内容可以不受限地读取。
no-cors：只允许使用 HEAD、 GET 和 POST 方法，且 JavaScript 不允许访问 response 中的内容。ServiceWorkers 拦截了这些请求，它不能随意添加或者改写任何headers。
navigate：用于支持页面导航。通常使用不到。
credentials：表示是否发送 cookie，有三个可选值 omit, same-origin, includecache：表示处理缓存的策略，关于此可以参考 https://fetch.spec.whatwg.org
omit：不发生 cookie
same-origin：仅在同源时发生 cookie
include：发送 cookie
redirect：发生重定向时候的策略。有以下可选值：referrer：一个字符串，可以是 no-referrer, client, 或者是一个 URL。默认值是 client。
follow：跟随
error：发生错误
manual：需要用户手动跟随
integrity：包含一个用于验证子资源完整性的字符串。关于此，可以参看 Subresource Integrity 介绍
该函数返回一个 Promise 对象，若请求成功会用 Response 的实例作为参数调用 resolve ，若请求失败会用一个错误对象来调用 reject。

Headers 类
Headers 类用来表示 HTTP 的头部信息，其构造函数可以接受一个表示 HTTP 头信息的对象，也可以接受一个 Headers 类的实例作为对象：

1 var header1 = new Headers({
2 ‘Content-Type’: ‘image/jpeg’,
3 ‘Accept-Charset’: ‘utf-8’
4 });
5
6 var header2 = new Headers(header1);
Headers 实例的方法
append
对一个字段追加信息，如果该字段不存在，就创建一个。

1 var header = new Headers();
2 header.append(‘Accept-Encoding’, ‘deflate’);
3 header.append(‘Accept-Encoding’, ‘gzip’);
4 // Accept-Encoding: [‘deflate’, ‘gzip’]
delete
删除某个字段

get
获得某个字段的第一个值

var header = new Headers();
header.append(‘Accept-Encoding’, ‘deflate’);
header.append(‘Accept-Encoding’, ‘gzip’);

header.get(‘Accept-Encoding’); //=> ‘deflate’
getAll
获得某个字段所有的值

var header = new Headers();
header.append(‘Accept-Encoding’, ‘deflate’);
header.append(‘Accept-Encoding’, ‘gzip’);

header.getAll(‘Accept-Encoding’); //=> [‘deflate’, ‘gzip’]
has
判断是否存在某个字段

set
设置一个字段，如果该字段已经存在，那么会覆盖之前的。

forEach
遍历所有的字段，接受一个回调函数，和可选的第二个参数。可选的第二个参数地值作为回调函数的 this 值。

var header = new Headers();
header.append(‘Accept-Encoding’, ‘deflate’);

header.forEach(function(value, name, header){
//…
},this);
Request 类
Request 对象用于描述请求内容。构造函数接受的参数和 fetch 函数的参数形式一样，实际上 fetch 方法会使用传入的参数构造出一个 Request 对象来。

下面例子从 github 抓取到 react 的 star 数并打印出来。

复制代码
var req = new Request(‘https://api.github.com/repos/facebook/react’,{
method:‘GET’
});

fetch(req).then(function(res){
return res.json()
}).then(function(data){
console.log(data.stargazers_count)
});
复制代码
Request 实例的属性
以下属性均为只读属性。这些属性的意义均在上面介绍 fetch 的参数的时候有过说明。

method
url
headers
referrer
referrerPolicy：处理来源信息的策略，关于此可以参见Referrer Policy
mode
credentials
redirect
integrity
cache
Response 类
Response 用来表示 HTTP 请求的响应。其构造函数形式如下：

var res = new Response(body, init);
其中 body 可以是：

Blob
BufferSource
FormData
URLSearchParams
USVString
init 是一个对象，其中包括以下字段：

status：响应的状态码，比如 200，404
statusText：状态信息，比如 OK
headers: 头部信息，可以是一个对象，也可以是一个 Headers 实例
Response 实例属性
以下属性均为只读属性

bodyUsed：用于表示响应内容是否有被使用过
headers：头部信息
ok：表明请求是否成功，当响应的状态码是 200~299 时，该值为 true
status：状态码
statusText：状态信息
type：表明了响应的类型，可能是下面几种值：url：响应的地址
basic：同源
cors：跨域
error：出错
opaque：Request 的 mode 设置为 “no-cors” 的响应
方法
clone：复制一个响应对象
要想从 Response 的实例中拿到最终的数据需要调用下面这些方法，这些方法都返回一个 Promise 并且使用对应的数据类型来 resolve。

arrayBuffer：把响应数据转化为 arrayBuffer 来 resolve
blob：把响应数据转换为 Blob 来 resolve
formData：把响应数据转化为 formData 来 resolve
json：把响应数据解析为对象后 resolve
text：把响应数据当做字符串来调用 resolve
总结
最后在把上面使用例子进行一个细致的说明：

复制代码
1 // 构造出 Request 对象
2 var req = new Request(‘https://api.github.com/repos/facebook/react’,{
3 method:‘GET’
4 });
5
6 // 发起请求，fetch 方法返回一个 Promise 对象
7 fetch(req).then(function(res){
8 // 得到了 response，这里调用 response 的 json 方法
9 // 该方法同样返回一个 Promise
10 return res.json();
11 }).then(function(data){
12 // 得到解析后的对象
13 console.log(data.stargazers_count)
14 });
复制代码

jszip批量下载压缩相关推荐

java文件批量下载打包成zip
1.首先html页面获取当前需要下载文件的id集合将转成字符串形式传递到后台. ................ 2 .下面就是获取字符串之后的批量下载/*** 多文件批量下载压缩成zip**root ...
vue中实现文件批量打包压缩下载（以及下载跨域问题分析）
上次做了一个选择多个数据生成多个二维码并下载,当时项目催的紧,就简单写了个循环生成二维码下载,一次性会下载很多文件,特别难整理: 刚好这次项目又遇到类似这种功能,需要一次性批量下载多个文件,那么就安排 ...
javaweb通过接口来实现多个文件压缩和下载（包括单文件下载，多文件批量下载）
程序员在做web等项目的时候,往往都需要添加文件上传.下载.删除的功能,有时是单文件,有时多文件批量操作,而这些功能的代码程序员可以自己收藏起来当成工具使用,这样,程序员在进行程序设计的时候就会 ...
批量下载，多文件压缩打包zip下载
0.写在前面的话图片批量下载,要求下载时集成为一个压缩包进行下载.从昨天下午折腾到现在,踩坑踩得莫名其妙,还是来唠唠,给自己留个印象的同时,也希望给需要用到这个方法的人带来一些帮助. 1.先叨叨IO ...
java oss如何下载文件_Java OSS批量下载并压缩为ZIP代码实例
这篇文章主要介绍了Java OSS批量下载并压缩为ZIP代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 /** * 批量下载为zip * @ ...
【java】文件批量下载并压缩为zip压缩包
[java] 文件批量下载并压缩为zip压缩包 java常用的压缩技术 java中常见实现压缩与解压业务场景代码实现注意点 java常用的压缩技术常见的压缩格式有很多种,例如:zip.rar. ...
批量文件压缩下载(zip)
ps:工作之余仅留备份用,未全面完善,请按需取用一.主要关注两点:1.找到文件并压缩:2.通过文件输出流响应前端 @RestController @RequestMapping("/fil ...
java后台批量下载文件并压缩成zip下载
因项目需要,将服务器上的图片文件压缩打包zip,下载到本地桌面. 首先,前端js: function doQueryPic() {var picsDate = $("#picsDate&qu ...
java批量下载多个文件并压缩
java批量下载多个文件并压缩本段代码的功能主要是实现通过文件主键,循环遍历下载各种格式的文件,下载后由java数据流处理压缩成一个zip格式的压缩包返回给前端页面. 后端实现控制层(Control ...
react——利用jszip实现文件批量下载并打包成zip文件
本文章主要记录利用jszip实现文件批量下载图片,文档.mp3,视频(MP4)等文件,一般而言前端实现下载功能一般都是通过a链,这在下载单个文件的场景很实用,但如果是批量下载很多个文件,同样也可以用a ...

jszip批量下载压缩

目的：vue使用jszip批量下载压缩

jszip批量下载压缩相关推荐

最新文章

热门文章