Firesbase存储-强制下载映像

Question

我想强制下载存储在Firebase Storage中的图像，但HTML锚点中的download属性不支持跨域，并且我不能将内容类型更改为application/octet-stream，因为它用于生成缩略图。

如何做到这一点？

Answer 1

在这种情况下，不能在html锚点中使用简单的"下载"。

您可以通过javascript发送下载请求。

有一个官方的下载样本。

storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
// `url` is the download URL for 'images/stars.jpg'
// This can be downloaded directly:
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();
// Or inserted into an <img> element:
var img = document.getElementById('myimg');
img.src = url;
}).catch(function(error) {
// Handle any errors
});

• 关于跨域
• 下载图像示例
• 有关web firebase的更多信息

Answer 2

我在下载mp4视频文件时遇到了类似的问题。浏览器似乎忽略了我的html锚点中的任何下载属性。因此，我的解决方案是从firebase请求Blob，这样做也有助于在存储中隐藏文件的url：

await getBlob(storageRef(storage, path))
.then((blob) => {
downloadUrl.value = URL.createObjectURL(blob);
}

现在浏览器(包括ios(直接触发下载，而不是通过点击锚点在浏览器中打开视频：

<a :href="downloadUrl" download="videofile">Download</a>