原理是把图片转成blob流,再通过a标签下载。
对外暴露downloadRemoteImg直接调用即可。
/**
* 下载图片并重命名
* download('https://www.baidu.com/img/baidu_resultlogo@2.png', 'ab.png')
*/
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
export function downloadRemoteImg(url, filename) {
getBlob(url, function (blob) {
saveAs(blob, filename)
})
}
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {cb}
*/
function getBlob(url: string, cb) {
const xhr = new XMLHttpRequest()
// if(url.includes('jfif')) {url = url.replace('jfif','jpg')}
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (xhr.status === 200) {
cb(xhr.response)
}
}
xhr.send()
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs(blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
} else {
const link = document.createElement('a')
const body = document.querySelector('body')
link.href = window.URL.createObjectURL(blob)
link.download = filename
// fix Firefox
link.style.display = 'none'
body.appendChild(link)
link.click()
body.removeChild(link)
window.URL.revokeObjectURL(link.href)
}
}