首页 > 其他分享 >js实现web端批量下载

js实现web端批量下载

时间:2023-10-31 13:57:13浏览次数:40  
标签:web 批量 zip js xhr let file 下载

使用场景:比如一个展现pdf文档列表的网页内需要允许客户自己勾选(可多选)需要打包下载的内容,最终以zip文件的形式在浏览器下载

此功能也可在服务端实现,但是在web端实现可以降低服务器负载,提升客户体验。

下面是代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> -->
</head>

<body>
<script>
async function batch(){
var zip = new JSZip();
// 需要下载的文件链接数组,替换成你要下载的内容
let files=["https://abc.com/1.pdf","https://abc.com/2.pdf"];
// 遍历下载文件并放入zip
for(let file of files){
// 使用浏览器自带的XMLHttpRequest
let data = await download(file);
// 使用axios
// let res = await axios.get(file,{responseType: 'blob'});
zip.file(file.substring(file.lastIndexOf('/')),data);
}
// 生成zip文件
let content = await zip.generateAsync({ type: "blob" });
// 触发浏览器下载
saveAs(content, "example.zip");
}
// 使用XMLHttpRequest实现,也可使用axios取代该方法
function download(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(xhr.statusText);
}
};
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
// 自动运行下载
batch().then(()=>{}).catch(console.log)
</script>
</body>
</html>

 

参考文章:http://blog.ncmem.com/wordpress/2023/10/31/js%e5%ae%9e%e7%8e%b0web%e7%ab%af%e6%89%b9%e9%87%8f%e4%b8%8b%e8%bd%bd/

欢迎入群一起讨论

 

 

标签:web,批量,zip,js,xhr,let,file,下载
From: https://www.cnblogs.com/songsu/p/17800060.html

相关文章

  • 网页CAD(web cad sdk)前端直接获取修改转换后的图纸数据
    前言有用户集成网页CAD之后,需要提取图纸的各种信息和数据,下面我们讲一下Web版CAD如何在前端直接提取修改和转换后的图纸信息,没有集成过在线CAD的小伙伴可以先看一下快速入门在mxcad中转换后的图纸(.mxweb格式的文件)可以通过mxcadnpm包得到图纸的各种数据,如图层、文字样式、图......
  • Android之WebView显示PDF文档
    参考:https://blog.csdn.net/Android_Cll/article/details/131641229https://cloud.tencent.com/developer/article/2301730Android项目新增js:/app/src/main/assets/wwwroot/index.js我新建了一个wwwroot放里面了。自己看着办。varurl=location.search.substring(1);PDFJS.......
  • 人脸识别平台批量导入绑定设备的一种方法
        因为原先平台绑定设备是通过一个界面进行人工选择绑定或一个人一个人绑定设备。如下: 但有时候需要在几千个里选择出几百个,那这种方式就不大现实了,需要另外一种方法。 目前相到可以通过导入批量数据进行绑定的方式。一、前端主要是显示选择文件与设备<template><d......
  • PasteSpider之appsettings.json中的Serilog的配置,分流不同日志层级的信息!
    在实际使用Serilog中,我们通常会有不一样的需求,常见的比如1.按照等级,高级哪个等级的才记录2.记录文件每个多大,超过的划分到下一个文件中3.不同等级的记录到不同的位置中4.按照不一样的格式输出以下是PasteSpider中的appsettings.json中关于Serilog的配置"Serilog":{......
  • webapi 注解调试工具swaggo 介绍和使用
    swaggo介绍和使用介绍Swag是一个开源项目,用于web框架下接口调试和文档管理,可以将代码中的接口注释转换为文档格式,并提供界面在线调试接口的功能。项目地址:https://github.com/swaggo/swag目前项目可以支持的web框架gin,echo,buffalo,net/http,gorilla/mux,go-chi/chi,flamingo,fi......
  • 【面试题】你理解中JS难理解的基本概念是什么?
    作用域与闭包作用域作用域是当前的执行上下文,值和表达式在其中“可见”或可被访问。如果一个变量或表达式不在当前的作用域中,那么它是不可用的。作用域也可以堆叠成层次结构,子作用域可以访问父作用域,反过来则不行。————MDN作用域最重要的特点是:子作用域可以访问父作用域,反之则......
  • mysql处理json格式的字段,一文搞懂mysql解析json数据
    文章目录一、概述1、什么是JSON2、MySQL的JSON3、varchar、text、json类型字段的区别二、JSON类型的创建1、建表指定2、修改字段三、JSON类型的插入1、字符串直接插入2、JSON_ARRAY()函数插入数组3、JSON_OBJECT()函数插入对象4、JSON_ARRAYAGG()和JSON_OBJECTAGG()将查询结果封装......
  • 面向Three.js开发者的3D自动纹理化开发包
    DreamTexture.js是面向three.js开发者的 3D模型纹理自动生成与设置开发包,可以为webGL应用增加3D模型的快速自动纹理化能力。图一为原始模型,图二图三为贴图后的模型。提示词:city,Realistic,cinematic,Frontview,Gamescenegraph1、DreamTexture.js开发包内......
  • 聊聊多层嵌套的json的值如何解析/替换
    前言前阵子承接了2个需求,一个数据脱敏,一个是低代码国际化多语言需求,这两个需求有个共同特点,都是以json形式返回给前端,而且都存在多层嵌套,其中数据脱敏的数据格式是比较固定,而低代码json的格式存在结构固定和不固定2种格式。最后不管是数据脱敏或者是多语言,业务抽象后,都存在需要......
  • js 中 == 和 === 区别
    在JavaScript中,==和===是用于比较值的两个不同的操作符,它们具有不同的行为:1)==(等于):它是相等操作符,用于比较两个值是否在类型转换后相等。如果两个值的内容相等,它返回true,否则返回false。类型转换是自动的,因此在比较之前,JavaScript会尝试将两个值转换为相同的类型,然后进行比较。......