如何將文件從谷歌雲存儲下載到用戶電腦（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>