单个图片的下载:
第一种
async downLoadImage() {
let response = await fetch('https://img-home.csdnimg.cn/images/20231127111739.png');
let data = await response.blob();
let url = window.URL.createObjectURL(data);
let link = document.createElement('a');
link.href = url;
link.download = 'image.jpg';
link.click();
}
第二种,支持旧浏览器
downloadImage() {
const imageUrl = 'https://img-home.csdnimg.cn/images/20231127111739.png';
const xhr = new XMLHttpRequest();
xhr.open("GET", imageUrl, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (xhr.status === 200) {
const url = window.URL.createObjectURL(xhr.response);
const link = document.createElement("a");
link.href = url;
link.download = "image22222.png";
link.click();
} else {
console.error("图片下载失败");
}
};
xhr.send();
}
多张图片的下载,需要压缩
下面是用的vue2技术:
import JSZip from "jszip";
import { saveAs } from "file-saver";
import axios from 'axios'
// 下载文件
function getFile (url) {
return new Promise((resolve, reject) => {
axios2.get(url, { responseType: 'arraybuffer' })
.then(response => {
resolve(response.data)
})
.catch(error => {
console.log(`Failed to download ${url}`, error);
return null; // return null when request fails
})
})
}
export function downFileAll(images, packName) {
const zip = new JSZip()
const cache = {}
const zip = new JSZip()
const cache = {}
const promises = images.map(url => getFile(url).then(data => {
const arr_name = url.split("/");
let file_name = arr_name[arr_name.length - 1];
zip.file(file_name, data, {
binary: true
});
cache[file_name] = data;
return data;
}));
return Promise.all(promises).then(() => {
return zip.generateAsync({ type: "blob" });
}).then(content => {
saveAs(content, packName);
});
}
调用方法:
imageUrl1:是图片的url地址
downloadImages([‘imageUrl1’, ‘imageUrl2’, ‘imageUrl3’, …], ‘packName’);