从 firebase 存储网络下载图像 - vuejs

Question

我正在尝试在将下载图像的图像上实现下载按钮。由于图像托管在 Firebase 存储上，我正在使用他们的代码变体来检索我在官方文档中找到的文件：https://firebase.google.com/docs/storage/web/download-files#download_data_via_url

我稍微更改了它，因为在示例中，代码正在从存储桶的路径中检索文件 url，而在我的例子中，我已经知道 url:

download(url) {
  const xhr = new XMLHttpRequest();
  xhr.responseType = "blob";
  xhr.onload = () => {
    xhr.response;
  };
  xhr.open("GET", url);
  xhr.send();
},

现在的问题是请求获取图像但未触发下载（到用户计算机）：

我知道我真的很接近，如何触发图片下载？此外，由于图像已经显示在网站上，我真的需要从 firebase 调用它吗？

解决方案：

感谢 Renaud 的帮助，我得以修复我的代码：

    download(url) {
      const xhr = new XMLHttpRequest();
      xhr.responseType = "blob";
      xhr.onload = () => {
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(xhr.response);
        const link = document.createElement("a");
        link.href = imageUrl;
        link.setAttribute("download", "test");
        link.setAttribute("target", "new");
        document.body.appendChild(link);
        link.click();
      };
      xhr.open("GET", url);
      xhr.send();
    },

请随时post优化此解决方案。

Answer 1

一种可能的方法是在页面中创建一个隐藏的 link 并模拟对此 link 的点击，如下所示：

// Get the URL. You have it since you call download(url)
// In case you don't have the URL, use const url = await getDownloadURL(fileRef);
const url = ...


const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
link.setAttribute('target', 'new');
document.body.appendChild(link);
link.click();

从 firebase 存储网络下载图像 - vuejs

Download image from firebase storage web - vuejs

firebase

vue.js

download

google-cloud-storage

firebase-storage

解决方案：