Is it possible to generate zip file and download in Angular 4?

Question

I am beginner in Angular 4. I have refer lots of Links for generate Zip file but I can not get proper solution.
Is it possible to generate Zip file in Angular 4?
If possible, then how?

Answer 1

You can use any JS library in Angular. So for example you can use JSzip and then just:

import * as JSZip from 'jszip';

And now you will have access to this library methods. You can read more about using pure JS libs in angular. There is quite a lot of information about it and even clear instructions how to do it and use properly. I think it will be better if you dive in into this subject more instead of getting clear instruction step by step how to do it. You will learn more and if you will have such a problem in future you will solve it easily. I hope this suggestion will help you.

Answer 2

Install library

$ npm install --save npm install jszip

In a file tsconfig.json

{"compilerOptions": {"paths": {
  "jszip": ["../node_modules/jszip/dist/jszip.min.js"]
}}}

In a file demo.component.ts

import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';
import * as JSZip from 'jszip';

Function on demo.component.ts

downloadFileExample() {
  const jszip = new JSZip();
  jszip.file('Hello.txt', 'Hello World\n');

  jszip.generateAsync({ type: 'blob' }).then(function(content) {
    // see FileSaver.js
    saveAs(content, 'example.zip');
  });
}

This example is with Angular 6.