Angular download file popup blocker close

This is how i am accessing pdf from server and want to show in a new window but browser is blocking the pop up. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams?

Collectives on Stack Overflow. Learn more. Ask Question. Asked 2 years, 10 months ago. Active 1 year, 6 months ago. Viewed 4k times. Normally I would just use window. In my angular app, I am wrapping a bit of the Github api in and Angular service, and the code to open the window goes in there. Because of that it gets blocked. I also tried putting it in a function in the controller that gets called by a form via ng-submit.

So the question is, is there an elegant way to open a new page on a form submit from somewhere inside my service or controller, or will I need to find another way to do it?

Chrome by default blocks popups that are not a result of user's direct action. In your case, I assume, the call to window. This makes it asynchronous and Chrome blocks it. However, there is a workaround to make this work. Instantiate your window outside the callback function and you can reference the variable to change the target url of that window in callback function.

You can't get rid of the popup blocker for scripted automated window. Only real user's call to action events will open a new window without being blocked by popup blocker.

Imagine a situation in a site where there's no popup blocker in browser and javascript opens popups in a loop. You cannot download large files with this method. You will hit the memory limit per tab. This may be as low as GB. For large file downloads you need to specify a new tab e. I don't think there's a clean way to get around the large file size limitation with Ajax-style requests. Add a comment. Active Oldest Votes. One of the many ways that exist to solve this is as follows: this.

Amr ElAdawy 3, 5 5 gold badges 32 32 silver badges 49 49 bronze badges. Alejandro Corredor Alejandro Corredor 2, 1 1 gold badge 8 8 silver badges 6 6 bronze badges. What is this. Burjua the getReport returns a this.

The issue I'm having is that the window opens and closes immediately not downloading the file — Braden Brown. How can we set file name in here? I've used the above code for downloading a file from API response but i'm getting some error in creating the Blob part "Type response is not assignable to type Blobpart". Kindly help if anyone knows this issue — knbibin. Show 10 more comments.

Try this! Hector Cuevas Hector Cuevas 1, 1 1 gold badge 6 6 silver badges 3 3 bronze badges. I used step 2 in combination with the answer from Alejandro and it worked without the need to install file-saver Thank you! It works perfectly! I wonder if we can get the filename that is defined on the header of the response. Is that possible? This one however is not suitable for big files download.

Can someone please tell why this answer is downvoted? The topic is to download a file using angular2. If this method works to do a simple download then it should also be marked as a valid answer. SaurabhShetty, This won't help in case you want to send custom headers, what if you want to send an auth token for example?

If you look into OP question you can see he uses authHttp! I do understand the downvotes, nevertheless this answer solved my issue.

If you let the server return the url in some context, the server could prepare the url. The cover could be a url to an image in the server. When calling get Myrecord you let the server return the prepared url Cover , with security token and other headers set. It is an answer that works. Show 1 more comment. Justin Justin 8 8 silver badges 11 11 bronze badges.

How to show the filesize in the browser when the download starts? I am sending the filesize as content-length in the http header. How about this? So simple yet it is the one that work flawlessly. It doesn't clutter the DOM, doesn't create any element. I combined this solution with some of the aboves and it works like a charm. Tobias Ernst Tobias Ernst 3, 1 1 gold badge 25 25 silver badges 24 24 bronze badges. Thanks, works with Angular 8. Don't know why this was so hard to find. I think the reason the file gets corrupted is because you are loading res into the blob and you actually want res.

As of today. Have you found a solution? Still i couldn't see the file getting downloaded. I couldn't see any error as well. However, if you use authentication via bearer token etc. To see how to add a bearer token to all http requests in Angular see one of my previous articles:. First of all we need to download the file as a blob object. Therefore we introduce a new service method.

Keep a close look at the response type here. Unfortunately simply setting this to blob leads to a TypeScript error:. I saw a lot of example code that worked with window. So this solution did not work for me.