As mentioned by Alejandro Corredor it is a simple scope error. The subscribe is run asynchronously and the open must be placed in that context, so that the data finished loading when we trigger the download. That said, there are two ways of doing it. As the docs recommend the service takes care of getting and mapping the data:. Then, on the component we just subscribe and deal with the mapped data.
There are two possibilities. The first , as suggested in the original post, but needs a small correction as noted by Alejandro:. The second way would be to use FileReader. The logic is the same but we can explicitly wait for FileReader to load the data, avoiding the nesting, and solving the async problem.
Note: I am trying to download an Excel file, and even though the download is triggered so this answers the question , the file is corrupt. See the answer to this post for avoiding the corrupt file. ArrayBuffer by default it ResponseContentType. Downloading file through ajax is always a painful process and In my view it is best to let server and browser do this work of content type negotiation. I am using Angular 4 with the 4. I modified an answer I found in Js' Technical Blog which creates a link object, uses it to do the download, then destroys it.
The value of this. I am using this to download attachments, so I know the id, contentType and filename: I am using an MVC api to return the file:.
Inside downloadFile data function we need to make block, link, href and file name. I added in the file-saver as Hector Cuevas named in his answer. Using Angular2 v. The journal reducer Though this only sets the correct states used in our application I still wanted to add it in to show the complete pattern.
On the component part, you call the service without subscribing to a response. The solution is referenced from - here.
I found the answers so far lacking insight as well as warnings. This is the complete example with the application part and service part after. Note that we set the observe: "response" to catch the header for the filename. Also note that the Content-Disposition header has to be set and exposed by the server, otherwise the current Angular HttpClient will not pass it on. I added a dotnet core piece of code for that below. I got a solution for downloading from angular 2 without getting corrupt, using spring mvc and angular 2.
Here I am sending byte[] array has return type from the controller. This will give you xls file format. If you want other formats change the mediatype and file name with right extension.
I was facing this same case today, I had to download a pdf file as an attachment the file shouldn't be rendered in the browser, but downloaded instead. To achieve that I discovered I had to get the file in an Angular Blob , and, at the same time, add a Content-Disposition header in the response.
Well, I wrote a piece of code inspired by many of the above answers that should easily work in most scenarios where the server sends a file with a content disposition header, without any third-party installations, except rxjs and angular.
As you can see, it's basically pretty much the average backend call from angular, with two changes. Once the file is fetched from the server, I am in principle, delegating the entire task of saving the file to the helper function, which I keep in a separate file, and import into whichever component I need to. There, no more cryptic GUID filenames! We can use whatever name the server provides, without having to specify it explicitly in the client, or, overwrite the filename provided by the server as in this example.
Also, one can easily, if need be, change the algorithm of extracting the filename from the content-disposition to suit their needs, and everything else will stay unaffected - in case of an error during such extraction, it will just pass 'null' as the filename. As another answer already pointed out, IE needs some special treatment, as always. But with chromium edge coming in a few months, I wouldn't worry about that while building new apps hopefully.
There is also the matter of revoking the URL, but I'm kinda not-so-sure about that, so if someone could help out with that in the comments, that would be awesome.
You may also download a file directly from your template where you use download attribute and to [attr. This simple solution should work on most browsers. This answer suggests that you cannot download files directly with AJAX, primarily for security reasons. So I'll describe what I do in this situation,. Add href attribute in your anchor tag inside the component. Do all following steps in your component. If a tab opens and closes without downloading anything, i tried following with mock anchor link and it worked.
You can return a Blob object from the server and create an anchor tag and set the href property to an object URL created from the Blob. Now clicking on the anchor will download the file. You can set the file name as well. 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. How do I download a file with Angular2 or greater Ask Question. Asked 5 years, 9 months ago. Active 1 month ago. 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. Angularjs 2. If you're just starting out, be careful with basing your code on outdated information - the syntax has changed a lot through the Alpha and Beta versions.
You may need to adjust this part of it, if you want to handle the call differently, get the data back in a different format, etc. This is setup to use the transpiled Javascript code see index. As a shortcut you can use your raw TypeScript code, but this will significantly slow down your page because you need to load the huge typescript.
I added this into an existing Angular 1. Anything unclear? Let's finally define our custom operator that's using scan with our accumulator and seed :. Notice that this download operator accepts an optional parameter saver. Once a HTTP response is received, this function is invoked with the download content from inside the accumulator. This allows us to pass in a strategy for persisting the download to a file without directly coupling the operator to FileSaver. By keeping FileSaver.
The download operator can be tested without somehow mocking the saveAs import see here for corresponding tests. If we apply the same pattern to the service, we'll be able to test it just as easy. So let's do that by creating a custom injection token for saveAs in a file called saver. Let's use the Progress Bar from Angular Material to show how far along our download is. The component now only has to assign an observable download to this property:.
We can then subscribe to this observable through the AsyncPipe in combination with NgIf. While the download is pending we'll display the progress bar in 'buffer' mode you may also use 'query' , otherwise the progress is determinate. The bar's value can then easily be applied from Download. Pro Tip : If you need to map something to more than two values inside a template or rather a ternary statement won't do it for you: map the observable to the type you need or use a custom pipe instead of calling a component function from the template.
Both methods are pretty easy to write, more declarative and perform better. Here's a StackBlitz showing everything in action. The downloaded file is only 3MB, so you might want to enable throttling to see more of the progress bar. I hope this article helped you with your project. Hire me , if you need further support solving your specific problem. Sometimes even just a quick code review or second opinion can make a great difference.
With Sentry it's easy to log Angular errors server-side. In this example we create a designated service to track errors better than the browser console. Saving changes automatically to the server improves user-experience. Angular File Download with Progress March 10, web development frontend angular. DownloadProgress event. Essen, Germany.
0コメント