情景：
oss上面存储的图片，如果设置了 Content-Disposition 为 attachment，那么访问图片的时候是直接下载的；否则，访问是预览形式；
解决：
- 到oss客户端设置Content-Disposition，
- 后端设置 Content-Disposition，
- 前端实现，代码如下：
疑问：
- 设置了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数据转换成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()静态方法会创建一个DOMString，其中包含一个表示参数中给出的对象的URL。这个新的URL 对象表示指定的File对象或Blob对象。
在每次调用
createObjectURL()方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用URL.revokeObjectURL()方法来释放。
浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
生成的alink.href为什么不能在地址栏输入直接访问？
这个 URL 的生命周期和创建它的窗口中的
document绑定。
ie浏览器 navigator.msSaveBlob 是干什么的？
存储blob或file的方法，非标准，不推荐，仅出于兼容目的保留
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 ？
代码中对创建的<a> 进行的 appendChild 和 remove 操作主要是为了兼容 FireFox 浏览器，在 FireFox 浏览器下调用该方法如果不将创建的<a>标签添加到 body 里，点击链接不会有任何反应，无法触发下载，而在 Chrome 浏览器中则不受此影响。
网友评论