在客户端创建和保存文件 - Angular

Question

Using angular 8, I would like to create below directory structure and let the user download it as a zip;

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

I know how to create an individual file using Blob in angular like this link but I am not sure how to;

1. Create folders and above directory structure?
2. Zip the directory and download for the user as single zip file?

all on client side in browser without using the backend API

Answer 1

I created a stackblitz as an example: 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");
    });
  }

}