JS批量下载图片或文件(V2,已详细解说)
目标
例如,你在网上,看到某个网页可以下载很多图片资源,但是没有批量下载怎么办?于是,幻想有这么个函数 downloadImages(imageURLs)
批量下载。咋整?
方案
解决下载问题
一般情况下,用 <a>
标签可以实现文件的下载功能。一般下载是这样的代码:
<a href="/path/to/receipt.pdf" download>下载</a>
如此,点击下载,即可显示下载,此时文件名跟原名一样receipt.pdf。
download
属性配置目标文件(就是href
属性指定的文件 )将被执行下载操作。
download
的可配置一个值,作为下载后的文件名。如果文件名没有限制,那么浏览器将自动检测当前文件的扩展名并添加到文件上 (.img, .pdf, .txt, .html, 等等)如果没有配置一个值,原始文件名将被用上。
下边这种情况指定文件名。
<a href="/path/to/receipt.pdf" download="收据">下载</a>
如此,点击下载,即可显示下载并且文件名为收据.pdf。
解决下载图片时总是预览的问题
你可能已经意识到,上边的的这个方式对图片无法达到真正的下载,而是单纯的预览。应该怎么做呢?
我们可以通过将图片的二进制信息以Blob对象的方式存储,将其转换为URL对象,再让 <a>
来下载它。
-
fetch(imgUrl).then(res => blob())
来获取图片二进制信息 -
URL.createObjectURL(blob)
来创建图片的 URL 对象 -
document.createElement("a")
来创建下载链接对象 -
<a href="{url}" download>
来重新指向需要下载的图片资源 - 点击下载即可
- 清理创建的对象即可(URL、下载链接)
function downloadImage(filename, url) {
fetch(url)
.then((res) => res.blob())
.then((blob) => {
// create URL and Link
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
// Invoke download
a.click();
// remove URL and Link
window.URL.revokeObjectURL(url);
a.remove();
})
.catch((err) => console.error(err.message));
}
// 已下载的文件名为"new-filename.jpg"
downloadImage('new-filename', 'path/or/url/to/your/image.jpg')
注意下载图片的时候,最好是在图片URL相同的域名之下,否则很多图片是禁止跨域访问的。
解决批量问题
这里不是批量下载如何写循环的问题,而是
- 因为程序太快然而下载太慢所导致的一系列问题
我们就简化处理,一秒钟让它发送一个下载图片的请求。
for (let i=0; i<urls.length; i++) {
setTimeout(() => {
// codes for downloading an image
}, i*1000)
}
总结代码
“Talk is cheap, show you the code”:
function downloadImage(filename, url) {
fetch(url)
.then((res) => res.blob())
.then((blob) => {
// create URL and Link
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
// Invoke download
a.click();
// remove URL and Link
window.URL.revokeObjectURL(url);
a.remove();
})
.catch((err) => console.error(err.message));
}
function downloadImages(urls) {
for (let i = 0; i < urls.length; i++) {
setTimeout(() => {
// codes for downloading an image
downloadImage(`${Date.now()}`, urls[i]);
}, i * 1000);
}
}
// download two images for example
downloadImages(["/path/to/image1.jpg", "/path/to/image2.png"]);
搞定,收功。文章来源:https://www.toymoban.com/news/detail-475151.html
创作不易,请多珍惜。文章来源地址https://www.toymoban.com/news/detail-475151.html
到了这里,关于JS批量下载图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!