在客戶端創建和保存文件 - Angular

Question

使用 angular 8，我想創建以下目錄結構並讓用戶將其下載為 zip；

- folder1
-- file1.txt
- folder2
-- file2.txt
readme.txt

我知道如何像這個鏈接一樣使用 Blob 以角度創建單個文件，但我不確定如何；

1. 創建文件夾和上面的目錄結構？
2. 壓縮目錄並將用戶下載為單個 zip 文件？

全部在瀏覽器客戶端，不使用后端 API

Answer 1

我創建了一個stackblitz作為例子： https ://stackblitz.com/edit/angular-9ommhs

import { Component } from '@angular/core';
import * as JSZip from 'jszip';
import fileSaver from 'file-saver';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  createZip() {
    const zip = new JSZip.default();
    // create a file
    zip.file("Hello.txt", "Hello World\n");
    // create a file and a folder
    zip.file("nested/hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
      .then(function(content) {
        // see FileSaver.js
         fileSaver.saveAs(content, "example.zip");
    });
  }

}