如何使用getBlob()从Firebase云存储下载Zip文件？

你的问题出在使用window.location.replace(url)直接打开Blob URL时，浏览器会尝试解析文件内容而非触发下载行为，最终导致乱码显示。以下是具体修正方案：

核心修正逻辑 #

通过创建隐藏的<a>标签并设置download属性，强制浏览器触发文件下载，而非直接打开Blob内容。

修正后的完整代码 #

const handleDownload = () => {
  downloadPosts({ authorId: userId, includeTrashedPosts: includeTrashed })
    .then((response) => {
      const { filepath } = response.data
      const fileRef = ref(storage, filepath)
      return getBlob(fileRef, 100000)
    })
    .then((blob) => {
      // 确保Blob被识别为Zip格式（若云函数生成时已指定MIME类型可省略此步）
      const zipBlob = new Blob([blob], { type: 'application/zip' })
      const url = URL.createObjectURL(zipBlob)
      
      // 创建临时a标签触发下载
      const downloadLink = document.createElement('a')
      downloadLink.href = url
      // 设置下载后的文件名，可根据业务需求调整
      downloadLink.download = 'posts.zip'
      document.body.appendChild(downloadLink)
      downloadLink.click()
      
      // 清理临时元素与Blob URL，避免内存泄漏
      document.body.removeChild(downloadLink)
      URL.revokeObjectURL(url)
    })
}

关键说明 #

• download属性是核心：它会告诉浏览器将链接内容作为文件下载，而非直接打开
• 指定application/zip MIME类型：确保浏览器正确识别文件格式，避免解析错误
• 清理资源：调用URL.revokeObjectURL()释放Blob URL占用的内存，移除临时创建的<a>标签

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