Angular download zip file from server

There are multiple plugins you'll need to get zip download working using angular: angular-file-saver. I edited the question to explain how I solved the issue without using any plugin — edkeveked. Sign up or log in Sign up using Google.

Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Podcast Who is building clouds for the independent developer? Exploding turkeys and how not to thaw your frozen bird: Top turkey questions Featured on Meta. Now live: A fully responsive profile.

Reducing the weight of our footer. Visit chat. Linked Related Hot Network Questions. Question feed. Stack Overflow works best with JavaScript enabled. Accept all cookies Customize settings. Go through the link Creating Angular Project to create a new project. Make sure you give the project name as angular-file-download. For Angular 11 , you will find another option to set whether you want to use stricter type or not.

Here I am using stricter type and later I will show you how to use stricter type for response and error. Remember the file extension ts service. Service is one of fundamental blocks of every Angular application. Service is just a TypeScript class with or even without Injectable decorator.

Once you create the service class you need to register it under app. Injectable is a decorator that has a property providedIn. When the service is provided at root level, Angular creates a single, shared instance of service and injects into any class that needs it.

Registering the provider in the Injectable metadata also allows Angular to optimize an application by removing the service if it is not used. If you are not using stricter type then your code should be working fine as it is working for Angular First replace the line this. I am also accepting response as Blob Binary Large Object. You may also specify any value from supporting values, such as, json, blob, arraybuffer, text. You can have a look for more details on response type. I have used three ways for downloading file — two ways for Save as functionality and one way to show the file content on browser itself.

The above line create a Blob object with file content in response and expecting the file of JSON type. The above two lines create a URL that will open the file in browser in new window. The above line shows the file content on browser, so it does not give you save as option. The above line uses ready-made FileSaver module that will open the file with Save as option. I have created service class to fetch file data from a server URL but I need to provide a link or button for downloading the file.

In the view file I will give users two options for downloading the same file. I will use link as well as button for downloading the same file from the server. In the service class I have used Http module which may not be found automatically.