Angular 2 download file popup blocked

The saving then becomes a one-liner:. If you don't like adding a dependency for this and would prefer to use the manual approach shown before, you might as well refactor the code for saving the blob into a separate service. You can also create a custom injection token for URL - also see below how we'll do this for FileSaver.

By setting the option observe to events while making an HTTP request, we won't just receive the final response body of the request but also get access to intermediate HTTP events. We also need to explicitly pass the option reportProgress in order to receive HttpProgressEvents.

Our HTTP request will eventually look like follows:. Since we don't just want to forward these events to every component, our service has to do some more work. Otherwise our component would have to deal with HTTP specifics - that's what services are for! Instead let's introduce a data structure representing a download with progress:. A Download can be in one of three states.

Either it hasn't started yet, therefore it's pending. Otherwise it's done or still in progress. We use TypeScript's union types to define the different download states. Additionally, a download has a number indicating the download progress from 1 to Once a download is done, it will contain a Blob as its content - until then this property is not available, therefore null. Now we want to abstract from specific HTTP events to our newly defined data structure. This way our components can be decoupled from the underlying network protocol.

Since we're dealing with multiple events coming in over time, a RxJS operator is well suited here - so let's create one! The first step for this will be the creation of type guards helping us to distinguish different HTTP events. This way we can access event-specific fields in a type-safe way. As it is likely it will take some more time, could you wait for a while?

Thanks for the response. We are aiming to put this change in production very soon. So hopefully would expect a solution to this ASAP. Please let me know the status or if you want me to create a support case from my account?

You are seeing this error because Excel exporting process is getting blocked by that pop up blocker extension. I understand that it is getting blocked by that pop up blocker but the same export service is working fine with local angular build. It is only causing problem with production angular build I feel it can be fixed at your end. Please check with the development team and see if that can be fixed. Otherwise let us know we will find another way to handle this scenario.

FileBytes, AT. Hope this helps someone :. It will be better if you try to call the new method inside you subscribe this. Volodymyr Khmil Volodymyr Khmil 11 11 silver badges 11 11 bronze badges. The following example is to download a journal as PDF.

Get, url: url, responseType: ResponseContentType. Casper Nybroe Casper Nybroe 1 1 gold badge 16 16 silver badges 37 37 bronze badges. Ismail H Ismail H 3, 1 1 gold badge 28 28 silver badges 53 53 bronze badges. Change this line according to request headers you need. Blob; this. Baatar Baatar 2 2 silver badges 9 9 bronze badges.

Tushar Walzade Tushar Walzade 3, 4 4 gold badges 28 28 silver badges 49 49 bronze badges. FileName : "TeamsiteExport. Add "Content-Disposition", contentDisposition. ToString ; return File excelOutput.

David Zwart David Zwart 4 4 silver badges 19 19 bronze badges. I got a solution for downloading from angular 2 without getting corrupt, using spring mvc and angular 2 1st- my return type is :- ResponseEntity from java end. Mel 5, 10 10 gold badges 37 37 silver badges 40 40 bronze badges.

Gabriel Sezefredo Gabriel Sezefredo 4 4 bronze badges. If I use window. If you save file with randomized name, you can permit security for download url. By removing security from download url, improvement in the donwload speed will be achieved. First, how to call the code from your component file this.

Dibyodyuti Mondal Dibyodyuti Mondal 41 2 2 bronze badges. Basil Basil 1, 12 12 silver badges 19 19 bronze badges. I tried this and the file just seems to open in browser.. Simply put the url as href as below. Does it work? I get error Thanks can u pls share how does ur url looks like?

Id it file protocol or http or something else? It's File protocol. B--rian 4, 9 9 gold badges 29 29 silver badges 70 70 bronze badges. Max Max 11 3 3 bronze badges. Welcome to SO! Please check whether my typesetting and grammar corrections are helpful. Joe68 Joe68 So I'll describe what I do in this situation, Damitha Damitha 5 5 silver badges 6 6 bronze badges. GetFileName model. ReadAllBytesAsync model. Tanvir Tanvir 21 1 1 bronze badge. 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 what if you could invest in your favorite developer? Who owns this outage?

Building intelligent escalation chains for modern SRE. Featured on Meta. Find centralized, trusted content and collaborate around the technologies you use most. Connect and share knowledge within a single location that is structured and easy to search. I wanted to have the same behavior, i.

API is getting called successfully, see below screenshot. You need to do some workaround here. Angular 'http' service cannot give what you want. I pasted all my workable code here. You need to pick the part of your need. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams?