如何将文件从谷歌云存储下载到用户电脑（React）

Question

我在谷歌云存储上有文件，我想添加一个按钮，以便用户可以将这些文件下载到他们的电脑上。 我尝试了通常的方法：

<a href="imageUrlHere" download="testImage">Download</a>

但它只在同一选项卡中打开图像文件。

顺便说一句，一切都在应用程序的前端运行。

Answer 1

由于您已经下载了存储在云存储中的文件的 URL，因此以下 function 可以解决问题：

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>

---

或者，更好的是，添加一个监听器：

HTML

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

JavaScript

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();
}

Answer 2

使用 HTML 属性的替代方法是将Content-Disposition header 设置为attachment; filename="file.ext" attachment; filename="file.ext"所以你可以使用downloadURL所以只要 URL 在新选项卡中打开，它就会被下载。 这可以在上传文件时在元数据中设置，或者您可以使用updateMetadata() function 为现有文件添加它。

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>