如何从 Vue Web 应用程序中的 Firebase 存储下载文件？

Posted 2023-02-22

【中文标题】如何从 Vue Web 应用程序中的 Firebase 存储下载文件？

【英文标题】：How to download a file from firebase storage in a Vue web app?

【发布时间】：2020-12-14 19:40:31

【问题描述】：

情况：您需要通过具有 vue.js 网络应用程序（包含 vuetify）的浏览器，将 pdf 文件（或任何文件类型）从 firebase 存储下载到您的计算机。你看过firebase storage doc，但不是很清楚。您不确定适合自己的 Firebase 存储规则。这适用于前端 - 用户的浏览器。你将如何实现它？

【参考方案1】：

这是关于如何通过 vue 网络应用程序将文件从 firebase 存储下载到用户计算机的编译答案。 firebase storage download documentation 拥有您的 vue.js Web 应用程序将文件下载到计算机所需的 90%。按照那里的步骤。如果您没有使用 firebase 身份验证，那么您可能需要为每个人设置读取权限。默认情况下，只有经过身份验证的用户才能读取和写入。您可以在 Firebase 存储规则中这样做：

rules_version = '2';
service firebase.storage 
  match /b/bucket/o 
    match /allPaths=** 
      allow read: if request.auth == null;
      allow write: if request.auth != null;
    
  

这让任何人都可以查看/下载您的文件。接下来，按照上面发布的指南，您将能够获取文件的 url，然后将其转换为“blob”格式。现在，该指南没有告诉您下一步该做什么，但另一个 Stack Overflow answer 有解决方案。我在这里将两者结合起来。基本上代码中发生的是：

您应该从@click.prevent 事件发射器而不是@click 调用事件处理函数。 事件处理函数做了几件事。与 firebase 存储文档一样，它获取文件的 url 并通过 XMLHttpRequest() 将其转换为“blob”。 按照链接的解决方案，您应该创建一个新的a 元素，然后将其href 属性分配给“blob”，下载名称并发出click 事件。之后撤消href属性，以免发生意外。

传统上，我们使用a 链接来下载文件，但我们可以使用v-btn，因为我们在事件处理程序中创建a 链接。我的按钮有一个工具提示和图标。另外，由于 linter，我删除了 unuses 变量。

---

内部html模板：

<v-tooltip top>
  <template v-slot:activator=" on, attrs ">
    <v-btn
      :color="counterThemeColorClass"
      fab
      ripple
      v-bind="attrs"
      v-on="on"
      @click.prevent="downloadResumePdf"
    >
    <v-icon
      :color="themeColorClass"
      x-large
    >mdi-file-account-outline</v-icon>
    </v-btn>
  </template>
  <span class="font-weight-bold">download resume</span>
</v-tooltip>

内部脚本：

downloadResumePdf() 
  const resumeRef = firebase.storage()
    .ref('tenzin_resume.pdf');
  resumeRef.getDownloadURL().then((url) => 
    // `url` is the download URL
    console.log(url);
    // This can be downloaded directly:
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () 
      const blob = xhr.response;
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = 'tenzin_resume';
      link.click();
      URL.revokeObjectURL(link.href);
    ;
    xhr.open('GET', url);
    xhr.send();
  ).catch((error) => 
    // Handle any errors
    switch (error.code) 
      case 'storage/object-not-found':
        // File doesn't exist
        break;

      case 'storage/unauthorized':
        // User doesn't have permission to access the object
        break;

      case 'storage/canceled':
        // User canceled the upload
        break;

      case 'storage/unknown':
        // Unknown error occurred, inspect the server response
        break;
      default:
        break;
    
  );
,

---