Try this, cases like the following, the browser will perform a full page reload to the original link. Moreover assets folder should be outside angular app folder otherwise it won't work. Angular Reference. 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. Download file link not working in Angular Ask Question. Asked 3 years, 7 months ago. Active 1 year, 1 month ago. Viewed 17k times.
Viewed 35k times. I've an API which returns an excel document as response. The request will be one simple json. Improve this question. Sathia 4, 4 4 gold badges 34 34 silver badges 59 59 bronze badges. Add a comment.
Active Oldest Votes. Improve this answer. How to get the file with specific file name? Adrita Sharma Adrita Sharma I've set the HttpHeader as blob but still the same issue. Your call would then look like this: this. Also, I would suggest using a File object instead of just the Blob , which gives you the flexibility of giving it a filename like so: public downloadFile response: any, fileName? ShayD 5 5 silver badges 14 14 bronze badges.
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. They both contain the discriminator field type allowing us to easily return a boolean for the type assertion in our guards. The guards can be used with a simple if-statement, however, TypeScript will narrow the event type inside the statement block for us:. Based on these guards we can now create our custom operator.
Viewed k times. Improve this question. Basil 1, 12 12 silver badges 19 19 bronze badges. 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. Improve this answer. 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.
0コメント