方法1:
通过a标签,指定资源地址href和文件名称download (注意,这里的download只有同源时有效,比如是一个oss上的资源地址,download会无效)
方法2:
通过XMLHttpRequest发起一个get请求,指定返回blob,再将blob传入a标签下载
// 使用
getBlob(url, (blob) => {
this.saveAs(blob, file.name)
})
getBlob (url, cb) {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
// 指定返回blob
xhr.responseType = 'blob'
xhr.onload = function () {
if (xhr.status === 200) {
cb(xhr.response)
}
}
xhr.send()
},
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
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)
}
}