javascript - JS如何在包括Firefox在内的浏览器中下载10多个文件
问题描述
我尝试使用以下代码一次下载多个文件:
var urls = [...];
for(var i = 0; i < urls.length; i++) {
var tempLink = document.createElement('a');
tempLink.setAttribute('href', urls[i]);
tempLink.setAttribute('download', urls[i].split('/')[urls[i].split('/').length*1-1*1]);
tempLink.click();
}
而且有两个问题:
1. Chrome 和 Opera 一次只能下载 10 个文件
2.在 Firefox 中代码根本不起作用
如何解决这两个问题?
附言。我知道如何使用服务器端压缩所有文件,但我对没有服务器端的静态网站的 JS 解决方案感兴趣
解决方案
与其下载多个文件,最好的办法可能是将它们全部打包在一个文件中。例如,您可以从所有这些文件中生成一个 zip 文件。
既然您说服务器端解决方案不是您的选择,而是您的所有文件都托管在您的域上,那么我可以建议您首先通过 AJAX 获取所有文件(因为这些是页面上已经加载的图像,它们甚至不需要再次实际下载,而只需从缓存中收集),然后在前端构建您的 zip 文件。
// all images are from wikimedia
const urls = ['/3/3b/Hulda_Klagers_house_and_lawn.jpg/320px-Hulda_Klagers_house_and_lawn.jpg', '/1/15/P%C3%A8re-Lachaise_-_Division_79_-_Floriot_02.jpg/320px-P%C3%A8re-Lachaise_-_Division_79_-_Floriot_02.jpg', '/a/a6/V37-20180910-055_%2845088120261%29.jpg/320px-V37-20180910-055_%2845088120261%29.jpg', '/2/2b/MormantulLuiAmzaPellea_%284%29.JPG/360px-MormantulLuiAmzaPellea_%284%29.JPG', '/f/f8/Launch_of_LAWRENCE_LCCN2014710971.tif/lossy-page1-174px-Launch_of_LAWRENCE_LCCN2014710971.tif.jpg']
.map((url) => 'https://upload.wikimedia.org/wikipedia/commons/thumb' + url);
fetchBlobs(urls)
.then(pack)
.then((zipFile) => dl.href = URL.createObjectURL(zipFile));
function fetchBlobs(urls) {
return Promise.all(
urls.map((url) =>
fetch(url)
.then((resp) => resp.blob())
.then((blob) => {
// store the file name
blob.name = url.slice(url.lastIndexOf('/') + 1)
return blob;
})
)
);
}
function pack(blobs) {
const zip = new JSZip();
const folder = zip.folder('my_images');
blobs.forEach((blob) => folder.file(blob.name, blob));
return zip.generateAsync({type : "blob"});
}
<!-- using JSZip library https://stuk.github.io/jszip/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<a id="dl" download="images.zip">download</a>
推荐阅读
- c++ - 没有已知的转化
- rest - Loopback 3:在仅 api 的项目上实施社交身份验证
- haskell - Haskell 中的素数
- typescript - 如何在 CodeBuild 操作之间传递 CodePipeline 中的工件
- c# - 使用 StreamReader 时,如何将每 4 行分配给一个变量?
- javascript - 传单标记:PNG 或 base64 图像?
- typescript - 具有多种返回类型的 Typescript Promise 不可分配
- android - 用于音频文件混合的 FFmpeg 命令出现错误
- python - 尝试导入 matplotlib 时出现奇怪的错误
- java - 当用户输入错误字符或无效输入数据时,如何显示“打印”错误?