由于您已经有了存储在云存储中的文件的下载URL，下面的函数将执行此操作：

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

你可以用

<a onclick=triggerBrowserDownload("imageUrlHere")>Download</a>

或者，更好的方法是添加一个侦听器：

超文本标记语言

<a id="urlLink" url="imageUrlHere">Try it</a>

脚本语言

document.getElementById("urlLink").addEventListener('click', triggerBrowserDownload);

triggerBrowserDownload(evt) {
  const link = document.createElement('a');
  link.href = evt.target.attributes.value.url;
  link.setAttribute('download', fileName);
  link.setAttribute('target', 'new');
  document.body.appendChild(link);
  link.click();
}

另一种使用HTML属性的方法是将Content-Disposition头设置为attachment; filename="file.ext"，这样你就可以使用downloadURL，这样每当URL在新标签中打开时，它就会被下载。这可以在上传文件时在元数据中设置，或者你可以使用updateMetadata()函数为现有文件添加它。

const storageRef = ref(storage, 'image.png')

// Adding metadata while uploading files
await uploadBytes(
  storageRef,
  file,
  {
    contentDisposition: `attachment; filename="${file.name}"`,
  }
)

// Updating metadata for existing files
await updateMetadata(storageRef, {
  contentDisposition: 'attachment; filename="image.png"',
})

您只需要将用户重定向到一个新的标签页。如果您不指定filename，浏览器将提示用户输入一个。

<a href="URL_FROM_FIREBASE" target="_blank">Download</a>