前端通过 URL下载文件名修改名称

1、通过发送get请求 获取当前文件的blob
2、利用 navigator.msSaveBlob 进行保存
3、或者使用a标签的download属性进行处理
代码如下
function getBlob(url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
// 避免 200 from disk cache
url = url + ?r=${Math.random()}
xhr.open(‘GET’, url, true)
xhr.responseType = ‘blob’
xhr.onload = () => {
if (xhr.status === 200) {
debugger
resolve(xhr.response)
}
}
xhr.send()
})
}
function saveAs(blob,filename) {
if(window.navigator.msSaveOrOpenBlob){
navigator.msSaveBlob(blob,filename)
}else{
const anchor=document.createElement(‘a’)
const body= document.querySelector(‘body’)
anchor.href=window.URL.createObjectURL(blob)
anchor.download = filename
anchor.style.display=‘none’
body.appendChild(anchor)
anchor.click()
body.removeChild(anchor)
window.URL.revokeObjectURL(anchor.href)
}
}
async function download(url,newFileName) {
const blob= await getBlob(url)
saveAs(blob,newFileName)
}
调用方式

<button onclick="download('https://static.qiakr.com/-3d64207c35c8b8d1.jpg','我的下载图片')">图片下载</button>