CODEWITHSUNDEEP
angular
khawarizmi
khawarizmi

Reputation: 732

Create and Save File on Client Side - Angular

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

Upvotes: 0

Views: 2406

Answers (1)

Seryoga
Seryoga

Reputation: 851

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");
    });
  }

}

Upvotes: 1

Related Questions