Vue.js Web端实现Firebase Storage存储图片下载功能的问题与解决方案

我尝试给图片添加下载按钮，点击即可下载对应图片。由于图片托管在Firebase Storage上，我参考官方文档的文件拉取代码做了适配。
我对官方示例做了调整：官方示例是从存储桶的文件路径获取文件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();
},

欢迎大家针对该解决方案提出优化建议。

内容的提问来源于stack exchange，提问作者Fabio Magarelli