Javascript Firebase存储文件未下载。我做错了什么？

我需要下载一个已上载到Firebase存储的文件。我曾经得到CORS错误，但是我根据使用了gsutil，现在什么都没有发生。下载没有开始。我做错了什么

//Create reference of Storage
    let storage = firebase.storage();

    //Create reference to file in Storage
    let pathSubmission = 'Uploads/' + this.place1+ '/' + this.place2+ '/' + this.place3+ '/' + this.downloadSubmissionUID;

    let storageRef = storage.ref(pathSubmission);

    storageRef.getDownloadURL().then((url) => {

      console.log('downloadURL arg: ' + url);

      //Download file (no idea how this works)
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function(event) {
        var blob = xhr.response;
      };
      xhr.open('GET', url);
      xhr.send();

    })

---

实际上，该文件可能正在下载。这里的代码中存在问题：

//Download file (no idea how this works)
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
  var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();

浏览器完全按照它所说的去做。它以blob的形式下载文件。然后丢弃结果，因为您没有对

onload

处理程序中的数据执行任何操作

首先，我建议使用，它提供了比

XMLHttpRequest

更直观的API（在我看来）

以下是您可以如何做到这一点：

// Create reference of Storage
let storage = firebase.storage();

// Create reference to file in Storage
let pathSubmission = 'Uploads/' + this.place1+ '/' + this.place2+ '/' + this.place3+ '/' + this.downloadSubmissionUID;

let storageRef = storage.ref(pathSubmission);

storageRef.getDownloadURL()
  .then(url => {
    console.log('Download URL: ' + url)
    return fetch(url)
  })
  .then(response => response.blob())
  .then(blob => {
    console.log('File downloaded as blob')
    // Do something with the blob...
  })
  .catch(error => {
    console.error('Something went wrong while downloading the file:', error)
  })

---

实际上，该文件可能正在下载。这里的代码中存在问题：

//Download file (no idea how this works)
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
  var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();

浏览器完全按照它所说的去做。它以blob的形式下载文件。然后丢弃结果，因为您没有对

onload

处理程序中的数据执行任何操作

首先，我建议使用，它提供了比

XMLHttpRequest

更直观的API（在我看来）

以下是您可以如何做到这一点：

// Create reference of Storage
let storage = firebase.storage();

// Create reference to file in Storage
let pathSubmission = 'Uploads/' + this.place1+ '/' + this.place2+ '/' + this.place3+ '/' + this.downloadSubmissionUID;

let storageRef = storage.ref(pathSubmission);

storageRef.getDownloadURL()
  .then(url => {
    console.log('Download URL: ' + url)
    return fetch(url)
  })
  .then(response => response.blob())
  .then(blob => {
    console.log('File downloaded as blob')
    // Do something with the blob...
  })
  .catch(error => {
    console.error('Something went wrong while downloading the file:', error)
  })

通过使用，我的解决方案如下：

    //Create reference of Storage
    let storage = firebase.storage();

    //Create reference to file in Storage
    let pathSubmission = 'Uploads/' + this.place1 + '/' + this.place2+ '/' + this.place3 + '/' + this.downloadSubmissionUID;

    //Assign Storage reference the path reference
    let storageRef = storage.ref(pathSubmission);

    //Download file by creating XMLHttpRequest
    storageRef.getDownloadURL().then((url) => {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function(event) {
        //Create an `a` tag (since it has an `href` and a `download` attribute) 
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'someFileName';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();                            //Simulates a click event
        var blob = xhr.response;
      };
      xhr.open('GET', url);
      xhr.send();
    })

通过使用，我的解决方案如下：

    //Create reference of Storage
    let storage = firebase.storage();

    //Create reference to file in Storage
    let pathSubmission = 'Uploads/' + this.place1 + '/' + this.place2+ '/' + this.place3 + '/' + this.downloadSubmissionUID;

    //Assign Storage reference the path reference
    let storageRef = storage.ref(pathSubmission);

    //Download file by creating XMLHttpRequest
    storageRef.getDownloadURL().then((url) => {
      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.onload = function(event) {
        //Create an `a` tag (since it has an `href` and a `download` attribute) 
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'someFileName';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();                            //Simulates a click event
        var blob = xhr.response;
      };
      xhr.open('GET', url);
      xhr.send();
    })

---

好的，我正在记录

“文件作为blob下载”

，现在我该如何下载文件？“现在我该如何下载文件？”当您在控制台中看到该消息时，文件已经下载。您需要对

blob

执行一些操作。或者可以使用fetchapi将其解释为

json

，或

text

（字符串），或

ArrayBuffer

。我想你知道哪些是合适的，以及如何使用它们。如果没有，则有许多教程解释如何使用其中的每一个。这就是这个问题的内容-->如何实际下载文件？我不需要使用fetchapi。我仍处于第一步。好的，我正在记录

“文件作为blob下载”

，现在我该如何下载该文件？“现在我该如何下载该文件？”当您在控制台中看到该消息时，该文件已被下载。您需要对

blob

执行一些操作。或者可以使用fetchapi将其解释为

json

，或

text

（字符串），或

ArrayBuffer

。我想你知道哪些是合适的，以及如何使用它们。如果没有，则有许多教程解释如何使用其中的每一个。这就是这个问题的内容-->如何实际下载文件？我不需要使用fetchapi。我仍在原地踏步。