Javascript 如何在Vue web应用程序中从firebase存储下载文件？

情况：您需要通过具有vue.js web应用程序（包含vuetify）的浏览器将pdf文件（或任何文件类型）从firebase存储下载到您的计算机。你已经看过了，但它不是非常清晰。您不确定firebase存储规则是否适合您。这是用于前端-用户的浏览器。您应该如何实现这一点？

这是一个关于如何通过vue web应用程序将文件从firebase存储下载到用户计算机的编译答案。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”格式。现在，指南没有告诉你下一步该做什么，但另一个指南有解决方案。我把两者结合在一起。代码中发生的基本情况是：

您应该从

@click调用事件处理程序函数。阻止
事件发射器，而不是
@click

事件处理程序函数做了几件事。与firebase存储文档一样，它获取文件的url，并通过XMLHttpRequest（）将其转换为“blob”

按照链接的解决方案，您应该创建一个新的

a

元素，然后将其

href

属性分配给“blob”，下载名称并发出

单击事件。在之后取消
href
属性以避免发生事故

传统上，我们使用

a

链接下载文件，但在事件处理程序中创建

a

链接时，我们可以使用

v-btn

。我的按钮有一个工具提示和图标。此外，由于linter，我删除了未使用的变量

---

内部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;
    }
  });
},