Angular 2 file saving to downloads uring url

The component HTML template creates a list of files which can be download by the current authorized user and adds these in the browser as links. The SecurityService is used to login and get the access token and the token id from Identity Server 4.

This method authorizes using policies and checks if the file id exists. A HttpNotFound is returned, if the file id does not exist. It then validates, if the file exists on the file server. The method also checks, if the user is an administrator, and uses this to validate that the user is authorized to access the file.

The download file API can be used with the use once access id parameter. If the access id is valid, the file can be downloaded using the FileContentResult.

The UseOnceAccessIdService is responsible for generating the access id and validating it when using it. The object saves the time stamp as a property and also the file path which will be available for download for 30 seconds.

This object is then saved to a in-memory list. It then retrieves the UseOnceAccessId object if it still exists and returns the file path from this. The object is then deleted. This prevents that the file can be downloaded twice using the same key.

The UseOnceAccessId object is used to save a request for a download and generates the random access id string in the constructor. Now the files can be downloaded from the resource file server without using the access token in the URL or without using cookies.

Notes: Thanks for Alistair for pointing this out in the comments of the previous post. 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.

Add a comment. Active Oldest Votes. On angular Lee Willis Lee Willis 1, 9 9 silver badges 14 14 bronze badges. Ah, nice! Then, I get this "Refused to display, X-Frame options set to deny". I don't know, seems to be working, except this x-frame thing. The request is sent when I push a button. Can I use html in some way? Yes, I'm a web-noob ; — user Sign up or log in Sign up using Google.

Viewed 54k times. I want to download xlsx file from the client on angular 2 using rest api. Possible duplicate of Angular 2 downloading a file — jlew. This is what worked for me : stackoverflow. Add a comment. Active Oldest Votes.

Vergatti Vergatti 1 1 silver badge 6 6 bronze badges. Just made a blob then did FileSaver. Hi This also works for me but i have change responseType: 'blob' , this works for me of both files. Please find my code After nothing works.

I changed my server to return the same byte array with the addition of: response. If you have a answer about how to do it with blob please tell me :. This is what I ended up having to do. I tried to use the url creation from a blob and the browser could not figure out how to open the file.