1. Download SSRS report as Excel File (AngularJs, C#, MVC). Microsoft SQL Server and Database Concepts. Members can enroll in this course at no extra cost.
2. This article walks you through the steps for create a report in Excel using ExcelPackage. ExcelPackage provides server-side generation of Excel 2007 spreadsheets. It is a set of classes and wrappers around the.NET 3.0 System.IO.Packaging API and the new Office Open XML file format.

• Angularjs File Upload Path
• Angularjs Download Excel File From Server To Computer

I'm trying to download an excel file from server in angularjs but I'm getting rare characters when I try to generate a blob. Here is my server response (an array of bytes). Apr 28, 2015 -. Download a file with Angular.js and Express.js Showing 1-8 of 8 messages. So I came up with the idea of keeping the files inside the server directory and let Angular.js send with. Download a file with Angular.js and Express.js.

I am trying to download a zip file from my server (spring mvc controller).here is my code in angularjs (1.5) controller to download zip file.

Above code works, but I need to give file name which I am getting in the response header. I got the file name from header('Content-Disposition') how to use this file name to downloaded file ? currently it is giving any random file name.

I tried below code it works in chrome but its not working in mozilla... is there any other solution which works in all browsers ?

Thanks for help !

AliAli

2 Answers

An blob based solution:

You could use angular-file-saver to achieve this.

An other solution based on HTML5:

A simple way by using the HTML5 download attribute / MDN documentation. No need for blobs. This attribute is supported by any browser & browser version which supports AngularJS (excluding IE10/IE11 - IE Edge does support it).

linlin

The above answer by @lin is correct but I want to add that as the question demands, one can directly pass the file name set at the server to be the file name of the file at the client side as follows:

Just install the angular-file-saver, reference it in your app and inject it as a dependency.

Not the answer you're looking for? Browse other questions tagged javascriptangularjszip or ask your own question.

I have a WebApi / MVC app for which I am developing an angular2 client (to replace MVC). I am having some troubles understanding how Angular saves a file.

The request is ok (works fine with MVC, and we can log the data received) but I can't figure out how to save the downloaded data (I am mostly following the same logic as in this post). I am sure it is stupidly simple, but so far I am simply not grasping it.

The code of the component function is below. I've tried different alternatives, the blob way should be the way to go as far as I understood, but there is no function createObjectURL in URL. I can't even find the definition of URL in window, but apparently it exists. If I use the FileSaver.js module I get the same error. So I guess this is something that changed recently or is not yet implemented. How can I trigger the file save in A2?

For the sake of completeness, the service that fetches the data is below, but the only thing it does is to issue the request and pass on the data without mapping if it succeeds:

Sir E_net4 the Wise Downvoterrllrll

21 Answers

The problem is that the observable runs in another context, so when you try to create the URL var, you have an empty object and not the blob you want.

One of the many ways that exist to solve this is as follows:

When the request is ready it will call the function 'downloadFile' that is defined as follows:

the blob has been created perfectly and so the URL var, if doesn't open the new window please check that you have already imported 'rxjs/Rx' ;

I hope this can help you.

Amr ElAdawyAlejandro CorredorAlejandro Corredor

Try this!

1 - Install dependencies for show save/open file pop-up

2- Create a service with this function to recive the data

3- In the component parse the blob with 'file-saver'

This works for me!

Frederik Struck-Schøning

If you don't need to add headers in the request, to download a file in Angular2 you can do a simple:

in your component.

Frederik Struck-Schøningsurfealokeseasurfealokesea

This is for folks looking how to do it using HttpClient and file-saver:

1. Install file-saver

npm install file-saver --save

npm install @types/file-saver --save

API Service class:

Component:

Frederik Struck-Schøning

How about this?

I could do with it.
no need additional package.

Frederik Struck-Schøning

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.

Frederik Struck-Schøningrllrll

Download *.zip solution for angular 2.4.x: you must import ResponseContentType from '@angular/http' and change responseType to ResponseContentType.ArrayBuffer (by default it ResponseContentType.Json)

Frederik Struck-Schøning

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 think its best to have

to do it. This doesn't even require any new windows opening and stuff like that.

The MVC controller as in your sample can be like the one below:

Massimiliano Kraus

For those using Redux Pattern

I added in the file-saver as @Hector Cuevas named in his answer. Using Angular2 v. 2.3.1, I didn't need to add in the @types/file-saver.

The following example is to download a journal as PDF.

The journal actions

The journal effects

The journal service

The HTTP service

The journal reducerThough this only sets the correct states used in our application I still wanted to add it in to show the complete pattern.

I hope this is helpful.

Frederik Struck-SchøningCasper NybroeCasper Nybroe

I share the solution that helped me (any improvement is greatly appreciated)

On your service 'pservice' :

Component Part :

On the component part, you call the service without subscribing to a response. The subscribe for a complete list of openOffice mime types see : http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html

Frederik Struck-SchøningIsmail HIsmail H

To download and show PDF files, a very similar code snipped is like below:

Frederik Struck-Schøning

I am using Angular 4 with the 4.3 httpClient object. I modified an answer I found in Js' Technical Blog which creates a link object, uses it to do the download, then destroys it.

Client:

The value of this.downloadUrl has been set previously to point to the api. 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:

The attachment class looks like this:

The filerep repository returns the file from the database.

Hope this helps someone :)

Frederik Struck-Schøning

Update to Hector's answer using file-saver and HttpClient for step 2:

dmcgrandledmcgrandle

Here's something I did in my case -

The solution is referenced from - here

Tushar WalzadeTushar Walzade

It will be better if you try to call the new method inside you subscribe

Inside downloadFile(data) function we need to make block, link, href and file name

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. Here I am sending byte[] array has return type from the controller.

2nd- to include the filesaver in your workspace-in the index page as:

3rd- at component ts write this code:

This will give you xls file format. If you want other formats change the mediatype and file name with right extension.

Angularjs File Upload Path

Mel

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.

This was the simplest I could get (Angular 7):

Inside the service:

Then, when I need to download the file in a component, I can simply:

UPDATE:

Angularjs Download Excel File From Server To Computer

Removed unnecessary header setting from service

<a href='my_url' download='myfilename'>Download file</a>

my_url should have the same origin, otherwise it will redirect to that location

Not the answer you're looking for? Browse other questions tagged angulartypescriptdownloadfileapi or ask your own question.