如何获取 DownloadURL 列表并从 Firebase Storage 下载所有文件的 .ZIP 文件夹

Question

我的 Firebase Storage 存储分区中的文件夹和子文件夹中有很多文件。 我的实时 Firebase 数据库中有所有这些文件的 DownloadURL 列表。 我正在尝试进行批量下载，理想情况下创建一个 .ZIP 文件夹供最终用户立即下载。

其他几篇文章（例如如何从 Firebase 存储下载整个文件夹？ ）指出，没有内置 API 来进行批量下载，例如从存储桶下载整个文件夹。 据我所知，这并没有改变。

然而，一个相关的答案（ 如何从 Firebase 存储下载整个文件夹？ ）表明创建一个 .ZIP 文件夹是可能的，但没有详细说明如何。

我怎么可能...

... A) 在客户端使用纯 JS 以允许最终用户收集所有 DownloadURL 并立即下载文件？...

...或者...

... B) 使用用 Node.JS 编写的云函数使用 DownloadURLs 创建一个 .ZIP 文件，最终用户可以将其作为一个文件下载。 （我假设一个 .ZIP 文件可以作为另一个文件存储在存储桶中，它有自己的 DownloadURL 并像任何其他文件一样下载，然后在本地解压缩并提取所有原始文件。如果这不是，请纠正我案件）

... 或者这两种方法都不可行？ 如果不是为什么，缺少什么功能？

提前感谢您的任何见解！

Answer 1

迟到总比不到好，您可以使用JSZip ，它提供了一个简单的 API 用法。

生成 zip 文件后，您可以使用FileSaver保存/下载它。

这就是我生成 zip 文件的方式（从客户端）

import JSZip from "jszip";
import saveAs from "file-saver";

generateZipFile(photosToDownload) {

  var jszip = new JSZip();

  //Looping through to get the download url for each image
  for (let i = 0; i < photosToDownload.length; i++) {
    let photoName = photosToDownload[i].photo_image_name;
    let photoImageURL = photosToDownload[i].generated_image_url;

    let photoImageExtension = photoName.substr(photoName.length - 4);

    jszip.file(
      photoName + photoImageExtension, //in my case, this produces something like 'my image.jpg'
      this.downloadUrlAsPromise(photoImageURL) //generates the file we need to download
    );

    //If we have reached the last image in the loop, then generate the zip file
    if (i == photosToDownload.length - 1) {
      jszip.generateAsync({ type: "blob" }).then(function(content) {
        saveAs(content, "MyZipFile.zip");
      });
    }
  }
},

downloadUrlAsPromise(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "arraybuffer";
    xhr.onreadystatechange = function(evt) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.response);
        } else {
          reject(new Error("Error for " + url + ": " + xhr.status));
        }
      }
    };
    xhr.send();
  });
}, 

Answer 2

这是一个带有 ESNext 语法的简单 TypeScript 代码示例，它使用了上面@Oush 提到的相同包：

import JSZip from 'jszip';
import firebase from 'firebase/app';
import { saveAs } from 'file-saver';

export const downloadFolderAsZip = async (folderPath: string) => {
    const jszip = new JSZip();
    const folderRef = firebase.storage().ref(folderPath);
    const files = (await folderRef.listAll()).items;
    const downloadUrls: Array<string> = await Promise.all(
        files.map(({ name }) => folderRef.child(name).getDownloadURL())
    );
    const downloadedFiles = await Promise.all(downloadUrls.map(url => fetch(url).then(res => res.blob())));
    downloadedFiles.forEach((file, i) => jszip.file(files[i].name, file));
    const content = await jszip.generateAsync({ type: 'blob' });
    saveAs(content, folderPath);
};

请注意，您必须对云存储配置CORS第一，使这个可以工作。 默认情况下，Cloud Storage 没有 CORS 配置（您可以使用gsutil cors get gs://your-bucket-name.appspot.com命令来查找），因此浏览器会因为没有 CORS 而拒绝fetch()调用从 gcs 返回的标头。

进一步阅读：

• 配置、查看和删除存储桶中的 CORS
• 从在线 URL 下载 .zip 文件，将其解压缩，然后读取 .zip 中特定文件的内容
• 获取分页文件列表