情景：
oss上面存儲(chǔ)的圖片鹅龄，如果設(shè)置了 Content-Disposition 為 attachment驴娃，那么訪問圖片的時(shí)候是直接下載的花竞；否則，訪問是預(yù)覽形式揉燃；
解決：
- 到oss客戶端設(shè)置Content-Disposition扫尺，
- 后端設(shè)置 Content-Disposition，
- 前端實(shí)現(xiàn)你雌，代碼如下：
疑問：
- 設(shè)置了download屬性為什么還要blobUrl器联？【有知道的幫忙解答下】
- URL.createObjectURL和URL.revokeObjectURL是干什么的？【最后有解答】
- 生成的alink.href為什么不能在地址欄輸入直接訪問婿崭？【最后有解答】
- ie瀏覽器 navigator.msSaveBlob 是干什么的拨拓？【最后有解答】
- 為什么要appendChild 和 remove ？【最后有解答】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let url = "http://mybg.oss-cn-hangzhou.aliyuncs.com/2019031510452423"
const fileName = '2019031510452423.png'
let xhr = new XMLHttpRequest();
xhr.open("get", url, true); // true 表示異步
xhr.responseType = "blob";
xhr.onload = function (res) {
if (this.status == 200) {
var blob = this.response;
if ('download' in document.createElement('a')) { // 非IE下載
const alink = document.createElement('a')
alink.download = fileName
alink.style.display = 'none'
alink.href = URL.createObjectURL(blob) // 將blob數(shù)據(jù)轉(zhuǎn)換成BlobUrl
document.body.appendChild(alink)
alink.click()
URL.revokeObjectURL(alink.href) // 釋放URL 對象
document.body.removeChild(alink)
} else { // IE10+下載
navigator.msSaveBlob(blob, fileName)
}
}
}
xhr.send();
</script>
</body>
</html>
URL.createObjectURL和URL.revokeObjectURL是干什么的氓栈？
URL.createObjectURL()靜態(tài)方法會(huì)創(chuàng)建一個(gè)DOMString渣磷，其中包含一個(gè)表示參數(shù)中給出的對象的URL。這個(gè)新的URL 對象表示指定的File對象或Blob對象授瘦。
在每次調(diào)用
createObjectURL()方法時(shí)醋界，都會(huì)創(chuàng)建一個(gè)新的 URL 對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過提完。當(dāng)不再需要這些 URL 對象時(shí)形纺，每個(gè)對象必須通過調(diào)用URL.revokeObjectURL()方法來釋放。
瀏覽器在 document 卸載的時(shí)候徒欣，會(huì)自動(dòng)釋放它們逐样，但是為了獲得最佳性能和內(nèi)存使用狀況，你應(yīng)該在安全的時(shí)機(jī)主動(dòng)釋放掉它們打肝。
生成的alink.href為什么不能在地址欄輸入直接訪問脂新？
這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的
document綁定。
ie瀏覽器 navigator.msSaveBlob 是干什么的粗梭？
存儲(chǔ)blob或file的方法争便，非標(biāo)準(zhǔn)，不推薦断医，僅出于兼容目的保留
The
Navigator.msSaveBlob()method saves theFileorBlobto disk.
Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Deprecated
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
為什么要appendChild 和 remove 滞乙？
代碼中對創(chuàng)建的<a> 進(jìn)行的 appendChild 和 remove 操作主要是為了兼容 FireFox 瀏覽器奏纪，在 FireFox 瀏覽器下調(diào)用該方法如果不將創(chuàng)建的<a>標(biāo)簽添加到 body 里，點(diǎn)擊鏈接不會(huì)有任何反應(yīng)酷宵，無法觸發(fā)下載亥贸，而在 Chrome 瀏覽器中則不受此影響。
