目录
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提示，用方案一；反之方案二或方案三;
评论(0)