详解js实现单个或多个文件批量下载的方法是什么（详解JS实现单个或多个文件批量下载的方法）
目录
0.JS简介
前言
单个文件Download
方案一：location.href or window.open
方案二：通过a标签的download属性
方案三：API请求
多个文件批量Download
方案一：按单个文件download方式 ，循环依次下载
方案二：前端打包成zip download
方案三：后端压缩成zip ，然后以文件流url形式 ，前端调用download
总结
0.JS简介
JavaScript是一种基于原型的语言 ，它意味着它不使用类来定义对象 ，而是使用原型来定义对象和它们的属性和方法 。这种原型继承模式是JavaScript的一个独特特征 ，使其与其他基于类的语言（如Java和C++）有所不同 。
JavaScript在Web开发中扮演着非常重要的角色 。在Web应用程序中 ，它可以用来验证表单 、处理数据 、响应用户交互等 。JavaScript可以与HTML和CSS结合使用 ，创建交互式的 、动态的Web页面 。它可以与各种Web框架（如React 、Angular和Vue.js）一起使用 ，以便更轻松地开发大规模的Web应用程序 。
除了Web开发之外 ，JavaScript还可以用于服务器端开发 。使用Node.js平台 ，JavaScript可以用于构建高度可伸缩的Web应用程序和API 。Node.js是一个基于事件驱动 、非阻塞I/O的平台 ，它使JavaScript可以在服务器端运行 。Node.js包含了许多内置的模块 ，可以轻松地处理文件 、网络 、加密和HTTP请求等任务 。
JavaScript还可以用于移动应用程序开发 。与桌面应用程序不同 ，移动应用程序需要一种跨平台的语言来开发应用程序 。JavaScript可以用于开发基于React Native的移动应用程序 ，这是一个用于构建原生移动应用程序的开源框架 。使用React Native ，开发人员可以使用JavaScript开发应用程序 ，并在iOS和Android上运行相同的代码 。
JavaScript的语法相对简单 ，学习起来比较容易 。它有许多内置函数和方法 ，可以用于处理字符串 、数组 、对象等常见的数据类型 。JavaScript也支持闭包 、高阶函数和函数式编程等概念 ，这些概念使代码更加灵活和可重用 。
前言
在前端Web开发中 ，下载文件是一个很常见的需求 ，也有一些比较特殊的Case ，比如下载文件请求是一个POST 、url不是同源的 、批量下载文件等 。本文就介绍下几种download解决方案 ，以及特殊Case的最佳方案选择 。
单个文件Download
方案一：location.href or window.open
<a href={url} target="_blank">download</a> window.location.href = url; // 当前tab window.open(url); // 新tab缺点：
1.只支持get请求 ，不支持post请求 。
2.浏览器会根据header的content-type来判断是下载文件还是预览文件 。
比如 txt png 等格式文件 ，会在当前tab或新tab中预览 ，而不是下载下来 。
3.由于只支持get ，会有url参数过长问题 。
4.不能加request header ，无法做权限验证等逻辑 。
5.不支持自定义file name 。
方案二：通过a标签的download属性
通过HTML a标签的原生属性 ，使用浏览器下载 。
<a> - HTML（超文本标记语言） | MDN
<a href={url} download={fileName}>download</a> function downloadFile(url, fileName) { const a = document.createElement(a); a.style.display = none; a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); }优点：
都是走的浏览器下载文件逻辑 ，不会预览文件 。 当前tab打开方式下载 。 支持设置file name 。缺点：
只支持get请求 ，不支持post请求 。 不能加request header ，无法做权限验证等逻辑 。 不支持跨域地址 。方案三：API请求
API发送请求的方式 ，获取文件blog对象 ，然后通过URL.createObjectURL方法获取download url ，然后用方案二的<a download />方式下载 。
// 封装一个fetch download方法 async function fetchDownload(fetchUrl, method = "POST", body = null) { const response = await window.fetch(fetchUrl, { method, body: body ? JSON.stringify(body) : null, headers: { "Accept": "application/json", "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest", }, }); const fileName = getFileName(response); const blob = await response.blob(); const url = URL.createObjectURL(blob); return { blob, url, fileName }; // 返回blob 、download url 、fileName } // 根据response header获取文件名 function getFileName(response) { const disposition = response.headers.get(Content-Disposition); // 本例格式是："attachment; filename="img.jpg"" let fileName = disposition.split(filename=)[1].replaceAll(", ); // 可以根据自己的格式来截取文件名 // 参考https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition // let fileName = ; // if (disposition && disposition.indexOf(attachment) !== -1) { // const matches = /filename[^;=\n]*=((["]).*?\2|[^;\n]*)/.exec(disposition); // fileName = matches?.[1]?.replace(/["]/g, ); // } fileName = decodeURIComponent(fileName); return fileName; } // 页面里调用 // get fetchDownload(/api/get/file?name=img.jpg, GET).then(({ blob, url, fileName }) => { downloadFile(url, fileName); // 调用方案二的download方法 }); // post fetchDownload(/api/post/file, POST, { name: img.jpg }).then(({ blob, url, fileName }) => { downloadFile(url, fileName); });URL.createObjectURL 生成的url如果过多会有效率问题 ，可以在合适的时机（download后）释放掉 。
if (window.URL) { window.URL.revokeObjectURL(url); } else { window.webkitURL.revokeObjectURL(url); }优点：
因为最后用的是方案二 ，所以满足方案二的优点 。 支持post请求 、支持跨域（fetch本身支持） 。 可以加request header 。缺点：
低版本浏览器不支持 ，可以通过download in document.createElement(a)判断是否支持 。 浏览器兼容可能有问题 ，比如Safari 、IOS Safari 。多个文件批量Download
有些需求是 ，点一个按钮需要把多个文件同时download下来 ，有以下几个方案可以实现 。
方案一：按单个文件download方式 ，循环依次下载
downloadFile("/files/file1.txt", "file1.txt"); downloadFile("/files/word1.docx", "word1.docx"); downloadFile("/files/img1.jpg", "img1.jpg");利用上面的方案二的<a download />方式下载 ，会触发浏览器是Download multiple files提示 ，如果选了Allow则会正常下载 。
尝试每个download之间加延迟 ，依然会弹提示 。这个应该是浏览器机制问题了 ，没办法避免了 。
方案二：前端打包成zip download
前端可以通过一个第三方库 jszip ，可以把多个文件以blob 、base64或纯文本等形式 ，按自定义的文件结构 ，压缩成一个zip文件 ，然后通过浏览器download下来 。
// 先封装一个方法 ，请求返回文件blob async function fetchBlob(fetchUrl, method = "POST", body = null) { const response = await window.fetch(fetchUrl, { method, body: body ? JSON.stringify(body) : null, headers: { "Accept": "application/json", "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest", }, }); const blob = await response.blob(); return blob; } const zip = new JSZip(); zip.file("Hello.txt", "Hello World\n"); // 支持纯文本等 zip.file("img1.jpg", fetchBlob(/api/get/file?name=img.jpg, GET)); // 支持Promise类型 ，需要返回数据类型是 String, Blob, ArrayBuffer, etc zip.file("img2.jpg", fetchBlob(/api/post/file, POST, { name: img.jpg })); // 同样支持post请求 ，只要返回类型正确就行 const folder1 = zip.folder("folder01"); // 创建folder folder1.file("img3.jpg", fetchBlob(/api/get/file?name=img.jpg, GET)); // folder里创建文件 zip.generateAsync({ type: "blob" }).then(blob => { const url = window.URL.createObjectURL(blob); downloadFile(url, "test.zip"); });jszip还支持一些别的类型文件压缩 ，比如纯文本 、base64 、binary等等 ，详见：
由于走的是纯前端压缩 ，所以会有延迟问题 ，走到最后download时才会调起浏览器下载 ，所以页面可能需要一个效果来更新压缩进度 。zip.generateAsync方法就支持第二个参数 ，支持进度更新：
zip.generateAsync({ type: "blob" }, metadata => { const progress = metadata.percent.toFixed(2); // 保留2位小数 console.log(metadata.currentFile, "progress: " + progress + " %"); }).then(blob => ... );方案三：后端压缩成zip ，然后以文件流url形式 ，前端调用download
后台加个api ，然后把需要download的文件在后台压缩成zip ，然后把文件流输出出来 。然后就和单个文件download一样了 。
因为后台会先压缩 ，会有延迟才会把blob返回前台 ，而且需要传多个文件信息 ，一般是post请求 ，所以建议使用单个文件下载的方案三通过API请求实现 ，在请求前后加上提示语或loading效果 。
总结
本文介绍了前端单个文件的下载方案 ，以及批量多个文件下载的解决方案 。最后整理下方案建议：
单个文件下载：
如果url是同源的 ，并且是一个服务器上的静态文件路径 、或者是一个get请求 ，推荐方案二即 <a download />方式下载 。 反之 ，方案三即API请求方式 。批量文件下载：
如果有zip压缩需求 ，选方案二或方案三; 如果可以接受弹Download multiple files提示 ，用方案一；反之方案二或方案三;创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！