在客户端创建和保存文件 - 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");
    });
  }

}