情景：
oss上面存儲的圖片，如果設(shè)置了 Content-Disposition 為 attachment，那么訪問圖片的時候是直接下載的；否則，訪問是預(yù)覽形式；
解決：
- 到oss客戶端設(shè)置Content-Disposition，
- 后端設(shè)置 Content-Disposition，
- 前端實現(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)方法會創(chuàng)建一個DOMString，其中包含一個表示參數(shù)中給出的對象的URL。這個新的URL 對象表示指定的File對象或Blob對象。
在每次調(diào)用
createObjectURL()方法時，都會創(chuàng)建一個新的 URL 對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當(dāng)不再需要這些 URL 對象時，每個對象必須通過調(diào)用URL.revokeObjectURL()方法來釋放。
瀏覽器在 document 卸載的時候，會自動釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應(yīng)該在安全的時機主動釋放掉它們。
生成的alink.href為什么不能在地址欄輸入直接訪問？
這個 URL 的生命周期和創(chuàng)建它的窗口中的
document綁定。
ie瀏覽器 navigator.msSaveBlob 是干什么的？
存儲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> 進行的 appendChild 和 remove 操作主要是為了兼容 FireFox 瀏覽器，在 FireFox 瀏覽器下調(diào)用該方法如果不將創(chuàng)建的<a>標(biāo)簽添加到 body 里，點擊鏈接不會有任何反應(yīng)，無法觸發(fā)下載，而在 Chrome 瀏覽器中則不受此影響。
