264

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?

downloadfile(type: string){

    let thefile = {};
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    let url = window.URL.createObjectURL(thefile);
    window.open(url);
}

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:

downloadfile(runname: string, type: string){
   return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .catch(this.logAndPassOn);
}
3
  • 2
    You cannot download large files with this method. You will hit the memory limit per tab. This may be as low as 1-2GB.
    – Matthew B.
    Dec 12, 2018 at 18:42
  • 1
    @MatthewB. wish you had said what was better.
    – steve
    Mar 28, 2019 at 22:54
  • For large file downloads you need to specify a new tab e.g. if simulating an <A> click, target needs to equal "_blank" Or do a form submit. I don't think there's a clean way to get around the large file size limitation with Ajax-style requests.
    – Matthew B.
    Apr 2, 2019 at 18:11

32 Answers 32

242

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:

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

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

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

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' ;

import 'rxjs/Rx' ;

I hope this can help you.

15
  • 17
    What is this._reportService.getReport() and what does it return?
    – Burjua
    Aug 15, 2017 at 16:37
  • 5
    @Burjua the getReport() returns a this.http.get(PriceConf.download.url)
    – ji-ruh
    Sep 4, 2017 at 8:55
  • 7
    The issue I'm having is that the window opens and closes immediately not downloading the file Jul 23, 2018 at 22:29
  • 14
    How can we set file name in here ? by default it choose a numeric value as name
    – Saurabh
    Aug 21, 2018 at 12:28
  • 15
    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
    Oct 11, 2019 at 6:10
110

Try this!

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

npm install file-saver --save
npm install -D @types/file-saver

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

downloadFile(id): Observable<Blob> {
    let options = new RequestOptions({responseType: ResponseContentType.Blob });
    return this.http.get(this._baseUrl + '/' + id, options)
        .map(res => res.blob())
        .catch(this.handleError)
}

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

import {saveAs as importedSaveAs} from "file-saver";

  this.myService.downloadFile(this.id).subscribe(blob => {
            importedSaveAs(blob, this.fileName);
        }
    )

This works for me!

5
  • 1
    I used step 2 in combination with the answer from @Alejandro and it worked without the need to install file-saver...
    – Ewert
    Mar 13, 2018 at 11:11
  • 8
    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?
    – jfajunior
    Mar 26, 2018 at 9:41
  • 2
    error Av5 Argument of type 'RequestOptions' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; };
    – giveJob
    Nov 16, 2018 at 8:35
  • 2
    This one however is not suitable for big files download.
    – Reven
    Apr 3, 2020 at 9:19
  • 1
    @jfajunior if you wan't the file-name from the response you need to access the response header: add observe: 'response' to the request-options and return Observable<HttpResponse<Blob>> instead of Observable<Blob> - now you can access the response header and read file-name e.g. res.headers.get('File-Name')
    – Sepultura
    Dec 17, 2020 at 16:33
96

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

window.location.href='http://example.com/myuri/report?param=x';

in your component.

9
  • 5
    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. Feb 15, 2017 at 18:37
  • 10
    @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!
    – A.Akram
    Apr 17, 2017 at 10:50
  • 9
    I do understand the downvotes, nevertheless this answer solved my issue. Apr 21, 2017 at 13:06
  • 1
    If you let the server return the url in some context, the server could prepare the url. ex: object: MyRecord.Cover. 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. Oct 23, 2017 at 13:26
  • 8
    It is an answer that works. Just becuase it doesnt have <insert useful feature here> that doenst make it not an answer. Nov 19, 2019 at 16:21
57

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:

export() {
    return this.http.get(this.download_endpoint, 
        {responseType: 'blob'});
}

Component:

import { saveAs } from 'file-saver';
exportPdf() {
    this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}
1
  • 1
    How to show the filesize in the browser when the download starts? I am sending the filesize as content-length in the http header. Dec 9, 2018 at 18:13
54

How about this?

this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
        .catch((err)=>{return [do yourself]})
        .subscribe((res:Response)=>{
          var a = document.createElement("a");
          a.href = URL.createObjectURL(res.blob());
          a.download = fileName;
          // start download
          a.click();
        })

I could do with it.
no need additional package.

3
  • 4
    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.
    – Chax
    Nov 1, 2018 at 14:33
  • with responseType: "blob" i didn't use res.blob() and it works already! Aug 29, 2020 at 10:48
  • how about the file extension? for example I hardcode fileName='download' but I don't know the type of the file (could be .txt, .pdf, .png etc), how would I handle appending the extension to the file name so I the downloaded file would be download.pdf or download.png etc ? Oct 28, 2022 at 6:04
42

For newer angular versions:

npm install file-saver --save
npm install @types/file-saver --save


import {saveAs} from 'file-saver';

this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
  .subscribe(blob => {
    saveAs(blob, 'download.pdf');
  });
1
  • 1
    Thanks, works with Angular 8. Don't know why this was so hard to find.
    – MDave
    May 12, 2020 at 23:47
21

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:

//On the service:
downloadfile(runname: string, type: string){
  var headers = new Headers();
  headers.append('responseType', 'arraybuffer');
  return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .map(res => new Blob([res],{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
            .catch(this.logAndPassOn);
}

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:

//On the component
downloadfile(type: string){
  this.pservice.downloadfile(this.rundata.name, type)
      .subscribe(data => window.open(window.URL.createObjectURL(data)),
                  error => console.log("Error downloading the file."),
                  () => console.log('Completed file download.'));
  }

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.

//On the component using FileReader
downloadfile(type: string){
    var reader = new FileReader();
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(res => reader.readAsDataURL(res), 
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    reader.onloadend = function (e) {
        window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no');
  }
}

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.

16
  • 7
    I think the reason the file gets corrupted is because you are loading res into the blob and you actually want res._body . However _body is a private variable and not accessible. As of today .blob() and .arrayBuffer() on a http response object have not been implemented in Angular 2. text() and json() are the only two options but both will garble your body. Have you found a solution?
    – sschueller
    Mar 18, 2016 at 14:05
  • 1
    hi @rll, i followed the above steps and i am getting subscribe as completed. Still i couldn't see the file getting downloaded. I couldn't see any error as well. Please help
    – AishApp
    May 4, 2016 at 13:40
  • 1
    The 2 options lets me download the file, but it loads the data in the background first. What if I have a large file that has to be downloaded?
    – f123
    Nov 4, 2016 at 6:30
  • 1
    My solution is to just use <a href=""></a> to download a file. Jan 2, 2017 at 14:35
  • 1
    I know this is an old answer but it's high up on search results and is the accepted answer: The line ` headers.append('responseType', 'arraybuffer');` is wrong. It's an option, not a header. Please fix it. Aaaand... The headers are created and not used. Not helpful.
    – Stevo
    Apr 21, 2017 at 13:54
17

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)

getZip(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
 let headers = this.setHeaders({
      'Content-Type': 'application/zip',
      'Accept': 'application/zip'
    });

 return this.http.get(`${environment.apiUrl}${path}`, { 
   headers: headers, 
   search: params, 
   responseType: ResponseContentType.ArrayBuffer //magic
 })
          .catch(this.formatErrors)
          .map((res:Response) => res['_body']);
}
0
12

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:

doDownload(id: number, contentType: string) {
    return this.http
        .get(this.downloadUrl + id.toString(), { headers: new HttpHeaders().append('Content-Type', contentType), responseType: 'blob', observe: 'body' })
}

downloadFile(id: number, contentType: string, filename:string)  {

    return this.doDownload(id, contentType).subscribe(  
        res => { 
            var url = window.URL.createObjectURL(res);
            var a = document.createElement('a');
            document.body.appendChild(a);
            a.setAttribute('style', 'display: none');
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove(); // remove the element
        }, error => {
            console.log('download error:', JSON.stringify(error));
        }, () => {
            console.log('Completed file download.')
        }); 

} 

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:

 [ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
    public FileContentResult GetAttachment(Int32 attachmentID)
    { 
        Attachment AT = filerep.GetAttachment(attachmentID);            
        if (AT != null)
        {
            return new FileContentResult(AT.FileBytes, AT.ContentType);  
        }
        else
        { 
            return null;
        } 
    } 

The attachment class looks like this:

 public class Attachment
{  
    public Int32 AttachmentID { get; set; }
    public string FileName { get; set; }
    public byte[] FileBytes { get; set; }
    public string ContentType { get; set; } 
}

The filerep repository returns the file from the database.

Hope this helps someone :)

12

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

<a href="api/sample/download"></a> 

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:

[HttpGet("[action]")]
public async Task<FileContentResult> DownloadFile()
{
    // ...
    return File(dataStream.ToArray(), "text/plain", "myblob.txt");
}
4
  • 2
    You're right, but then how can you manage server errors within the single-page application? In case of an error, normally, a REST service returns the JSON with the error, thus resulting the application to open the JSON in another browser window, which is not what the user wants to see
    – Luca
    Apr 4, 2017 at 13:01
  • 4
    If you have an access token you need to provide this doesn't work
    – chris31389
    Sep 20, 2017 at 16:15
  • This is plain and simple. But if you wanna do some authentication, then there is a possibility of having something like a one time token. So, instead of having it like this, you can have the url as: example.com/myuri/report?tokenid=1234-1233 And verify the token ID in the database. Of course its not a simple scenario and works in all the situations, but can be a solution in situation where, you have access to the database before returning the report as a stream..
    – GingerBeer
    Sep 22, 2017 at 9:59
  • Get the download url from the server. So the server can prepare the url with onetime security token. Oct 23, 2017 at 13:23
9

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

this._reportService.getReport()
    .subscribe((data: any) => {
        this.downloadFile(data);
    },
        (error: any) => сonsole.log(error),
        () => console.log('Complete')
    );

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

downloadFile(data: any, type: number, name: string) {
    const blob = new Blob([data], {type: 'text/csv'});
    const dataURL = window.URL.createObjectURL(blob);

    // IE doesn't allow using a blob object directly as link href
    // instead it is necessary to use msSaveOrOpenBlob
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob);
      return;
    }

    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'export file.csv';
    link.click();

    setTimeout(() => {

      // For Firefox it is necessary to delay revoking the ObjectURL
      window.URL.revokeObjectURL(dataURL);
      }, 100);
    }
}
0
8

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.

First, how to call the code from your component file

this.httpclient.get(
   `${myBackend}`,
   {
      observe: 'response',
      responseType: 'blob'
   }
).pipe(first())
.subscribe(response => SaveFileResponse(response, 'Custom File Name.extension'));

As you can see, it's basically pretty much the average backend call from angular, with two changes

  1. I am observing the response instead of the body
  2. I am being explicit about the response being a blob

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

export const SaveFileResponse = 
(response: HttpResponse<Blob>, 
 filename: string = null) => 
{
    //null-checks, just because :P
    if (response == null || response.body == null)
        return;

    let serverProvidesName: boolean = true;
    if (filename != null)
        serverProvidesName = false;

    //assuming the header is something like
    //content-disposition: attachment; filename=TestDownload.xlsx; filename*=UTF-8''TestDownload.xlsx
    if (serverProvidesName)
        try {
            let f: string = response.headers.get('content-disposition').split(';')[1];
            if (f.includes('filename='))
                filename = f.substring(10);
        }
        catch { }
    SaveFile(response.body, filename);
}

//Create an anchor element, attach file to it, and
//programmatically click it. 
export const SaveFile = (blobfile: Blob, filename: string = null) => {
    const a = document.createElement('a');
    a.href = window.URL.createObjectURL(blobfile);
    a.download = filename;
    a.click();
}

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.

7

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

public static DOWNLOAD_JOURNALS = '[Journals] Download as PDF';
public downloadJournals(referenceId: string): Action {
 return {
   type: JournalActions.DOWNLOAD_JOURNALS,
   payload: { referenceId: referenceId }
 };
}

public static DOWNLOAD_JOURNALS_SUCCESS = '[Journals] Download as PDF Success';
public downloadJournalsSuccess(blob: Blob): Action {
 return {
   type: JournalActions.DOWNLOAD_JOURNALS_SUCCESS,
   payload: { blob: blob }
 };
}

The journal effects

@Effect() download$ = this.actions$
    .ofType(JournalActions.DOWNLOAD_JOURNALS)
    .switchMap(({payload}) =>
        this._journalApiService.downloadJournal(payload.referenceId)
        .map((blob) => this._actions.downloadJournalsSuccess(blob))
        .catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))
    );

@Effect() downloadJournalSuccess$ = this.actions$
    .ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)
    .map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))

The journal service

public downloadJournal(referenceId: string): Observable<any> {
    const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;
    return this._http.getBlob(url);
}

The HTTP service

public getBlob = (url: string): Observable<any> => {
    return this.request({
        method: RequestMethod.Get,
        url: url,
        responseType: ResponseContentType.Blob
    });
};

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.

case JournalActions.DOWNLOAD_JOURNALS: {
  return Object.assign({}, state, <IJournalState>{ downloading: true, hasValidationErrors: false, errors: [] });
}

case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {
  return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors: [] });
}

I hope this is helpful.

7

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

On your service 'pservice' :

getMyFileFromBackend(typeName: string): Observable<any>{
    let param = new URLSearchParams();
    param.set('type', typeName);
    // setting 'responseType: 2' tells angular that you are loading an arraybuffer
    return this.http.get(http://MYSITE/API/FILEIMPORT, {search: params, responseType: 2})
            .map(res => res.text())
            .catch((error:any) => Observable.throw(error || 'Server error'));
}

Component Part :

downloadfile(type: string){
   this.pservice.getMyFileFromBackend(typename).subscribe(
                    res => this.extractData(res),
                    (error:any) => Observable.throw(error || 'Server error')
                );
}

extractData(res: string){
    // transforme response to blob
    let myBlob: Blob = new Blob([res], {type: 'application/vnd.oasis.opendocument.spreadsheet'}); // replace the type by whatever type is your response

    var fileURL = URL.createObjectURL(myBlob);
    // Cross your fingers at this point and pray whatever you're used to pray
    window.open(fileURL);
}

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

5

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

  private downloadFile(data: Response): void {
    let blob = new Blob([data.blob()], { type: "application/pdf" });
    let url = window.URL.createObjectURL(blob);
    window.open(url);
  }

  public showFile(fileEndpointPath: string): void {
    let reqOpt: RequestOptions = this.getAcmOptions();  //  getAcmOptions is our helper method. Change this line according to request headers you need.
    reqOpt.responseType = ResponseContentType.Blob;
    this.http
      .get(fileEndpointPath, reqOpt)
      .subscribe(
        data => this.downloadFile(data),
        error => alert("Error downloading file!"),
        () => console.log("OK!")
      );
  }
5

Here's something I did in my case -

// service method
downloadFiles(vendorName, fileName) {
    return this.http.get(this.appconstants.filesDownloadUrl, { params: { vendorName: vendorName, fileName: fileName }, responseType: 'arraybuffer' }).map((res: ArrayBuffer) => { return res; })
        .catch((error: any) => _throw('Server error: ' + error));
}

// a controller function which actually downloads the file
saveData(data, fileName) {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    let blob = new Blob([data], { type: "octet/stream" }),
        url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
}

// a controller function to be called on requesting a download
downloadFiles() {
    this.service.downloadFiles(this.vendorName, this.fileName).subscribe(data => this.saveData(data, this.fileName), error => console.log("Error downloading the file."),
        () => console.info("OK"));
}

The solution is referenced from - here

5

I found the answers so far lacking insight as well as warnings. You could and should watch for incompatibilities with IE10+ (if you care).

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.

public exportAsExcelFile(dataId: InputData) {
    return this.http.get(this.apiUrl + `event/export/${event.id}`, {
        responseType: "blob",
        observe: "response"
    }).pipe(
        tap(response => {
            this.downloadFile(response.body, this.parseFilename(response.headers.get('Content-Disposition')));
        })
    );
}

private downloadFile(data: Blob, filename: string) {
    const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8;'});
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        const link = document.createElement('a');
        if (link.download !== undefined) {
            // Browsers that support HTML5 download attribute
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

private parseFilename(contentDisposition): string {
    if (!contentDisposition) return null;
    let matches = /filename="(.*?)"/g.exec(contentDisposition);

    return matches && matches.length > 1 ? matches[1] : null;
}

Dotnet core, with Content-Disposition & MediaType

 private object ConvertFileResponse(ExcelOutputDto excelOutput)
    {
        if (excelOutput != null)
        {
            ContentDisposition contentDisposition = new ContentDisposition
            {
                FileName = excelOutput.FileName.Contains(_excelExportService.XlsxExtension) ? excelOutput.FileName : "TeamsiteExport.xlsx",
                Inline = false
            };
            Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
            Response.Headers.Add("Content-Disposition", contentDisposition.ToString());
            return File(excelOutput.ExcelSheet, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        }
        else
        {
            throw new UserFriendlyException("The excel output was empty due to no events.");
        }
    }
4

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

public downloadFile(file: File): Observable<Blob> {
    return this.http.get(file.fullPath, {responseType: 'blob'})
}
4

The following code worked for me

Made the HTML like this:

<button type="button" onclick="startDownload(someData)">Click to download!</button>

JS is as follows:

let someData = {};
someData.name = 'someName';
someData.fileurl= 'someUrl';

function startDownload(someData){
    let link = document.createElement('a');
    link.href = someData.fileurl; //data is object received as response
    link.download = someData.fileurl.substr(someData.fileurl.lastIndexOf('/') + 1);
    link.click();
}
3
  • what the does the html portion look like? Sep 29, 2021 at 0:40
  • Hi @ScipioAfricanus, changed the answer with the HTML code too.
    – Basil
    Sep 29, 2021 at 8:49
  • I tried this and the file just seems to open in browser.. is there a way to get it to launch the download window? Oct 13, 2021 at 19:44
3

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:

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

3rd- at component ts write this code:

import {ResponseContentType} from '@angular.core';

let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
        let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
            this.http
            .post('/project/test/export',
                    somevalue,options)
              .subscribe(data => {

                  var mediaType = 'application/vnd.ms-excel';
                  let blob: Blob = data.blob();
                    window['saveAs'](blob, 'sample.xls');

                });

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

3

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

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

2
3

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:

getFile(id: String): Observable<HttpResponse<Blob>> {
  return this.http.get(`./file/${id}`, {responseType: 'blob', observe: 'response'});
}

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

fileService.getFile('123').subscribe((file: HttpResponse<Blob>) => window.location.href = file.url);

UPDATE:

Removed unnecessary header setting from service

3
  • If I use window.location.href instead of window.open Chrome treats it as multiple file downloads.
    – DanO
    Jun 13, 2019 at 16:33
  • this won't work if you have auth token needed in header
    – garg10may
    Dec 12, 2019 at 14:13
  • 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.
    – whitefang
    Sep 10, 2021 at 14:18
3

Angular 12 + ASP.NET 5 WEB API

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.

downloadFile(path: string): Observable<any> {
        return this._httpClient.post(`${environment.ApiRoot}/accountVerification/downloadFile`, { path: path }, {
            observe: 'response',
            responseType: 'blob'
        });
    }

saveFile(path: string, fileName: string): void {
            this._accountApprovalsService.downloadFile(path).pipe(
                take(1)
            ).subscribe((resp) => {
                let downloadLink = document.createElement('a');
                downloadLink.href = window.URL.createObjectURL(resp.body);
                downloadLink.setAttribute('download', fileName);
                document.body.appendChild(downloadLink);
                downloadLink.click();
                downloadLink.remove();
            });
            
        }

Backend

[HttpPost]
[Authorize(Roles = "SystemAdmin, SystemUser")]
public async Task<IActionResult> DownloadFile(FilePath model)
{
    if (ModelState.IsValid)
    {
        try
        {
            var fileName = System.IO.Path.GetFileName(model.Path);
            var content = await System.IO.File.ReadAllBytesAsync(model.Path);
            new FileExtensionContentTypeProvider()
                .TryGetContentType(fileName, out string contentType);
            return File(content, contentType, fileName);
        }
        catch
        {
            return BadRequest();
        }
    }

    return BadRequest();

}
1
 let headers = new Headers({
                'Content-Type': 'application/json',
                'MyApp-Application': 'AppName',
                'Accept': 'application/vnd.ms-excel'
            });
            let options = new RequestOptions({
                headers: headers,
                responseType: ResponseContentType.Blob
            });


this.http.post(this.urlName + '/services/exportNewUpc', localStorageValue, options)
                .subscribe(data => {
                    if (navigator.appVersion.toString().indexOf('.NET') > 0)
                    window.navigator.msSaveBlob(data.blob(), "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+".xlsx");

                    else {
                        var a = document.createElement("a");
                        a.href = URL.createObjectURL(data.blob());
                        a.download = "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+ ".xlsx";
                        a.click();
                    }
                    this.ui_loader = false;
                    this.selectedexport = 0;
                }, error => {
                    console.log(error.json());
                    this.ui_loader = false;
                    document.getElementById("exceptionerror").click();
                });
1

Simply put the url as href as below .

<a href="my_url">Download File</a>
3
  • Does it work? I get error... " ERROR TypeError: "Access to 'file:///Downloads/test.json' from script denied.""
    – Jay
    Feb 17, 2019 at 13:56
  • Thanks can u pls share how does ur url looks like? Id it file protocol or http or something else?
    – Jay
    Feb 18, 2019 at 7:40
  • It's File protocol. Feb 18, 2019 at 9:43
1

You may also download a file directly from your template where you use download attribute and to [attr.href] you can provide a property value from the component. This simple solution should work on most browsers.

<a download [attr.href]="yourDownloadLink"></a>

Reference: https://www.w3schools.com/tags/att_a_download.asp

1
  • 1
    Welcome to SO! Please check whether my (typesetting and grammar) corrections are helpful.
    – B--rian
    Aug 14, 2019 at 7:28
1

Create a temporary anchor tag, then click it programmatically with Javascript

async function downloadFile(fileName) {
    const url = document.getElementById("url").value

    const link = document.createElement('a');
    link.href = await toDataURL(url);
    link.setAttribute('download', fileName ? fileName : url.split('/').pop());
    link.setAttribute('target', 'blank');
    document.body.appendChild(link);
    link.click();
}


function toDataURL(url) {
    return fetch(url)
        .then((response) => {
            return response.blob();
        })
        .then((blob) => {
            return URL.createObjectURL(blob);
        });
}
<input id="url" value="https://images.pexels.com/photos/1741205/pexels-photo-1741205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"/>
<button onclick="downloadFile('test')">Download</button>

1

Although the question is old, none of the answers are that viable. As far as I saw all the files are first loaded in memory and saved after that. This way we:

  1. Cause a lag, for which a custom loading must be implemented.
  2. Load the file in memory, which means for big files the browser will crash.
  3. Do not use the implemented browser download function.

The front end side is simple enough (Angular 12):

downloadFile(url: string, fileName: string): void {
   const downloadLink = document.createElement('a');
   downloadLink.download = fileName;
   downloadLink.href = url;
   downloadLink.click();
}

On the back end (.NET 6) we need to work with streams and write to the response body:

public void Get(string fileId)
{
    var fileName = fileService.GetFileName(fileId);
    var fileContentType = fileService.GetFileContentType(fileId);
    this.Response.Headers.Add(HeaderNames.ContentType, fileContentType);
    this.Response.Headers.Add(HeaderNames.ContentDisposition, $"attachment; filename=\"{fileName}\"");
    fileService.GetFile(Response.Body, fileId);
}

File content type and name can be retrieved from either the DB (if you save file info in there) or the file system. Content type is parsed from the extension.

I write to the stream like this:

public void GetFile(Stream writeStream, string fileId)
{
    var file = GetFileInfo(fileId);
    try
    {
        var fileStream = File.OpenRead(file.FullName);
        byte[] buffer = new byte[32768];
        int read;
        while ((read = fileStream.Read(buffer, 0, buffer.Length)) > 0)
        {
            writeStream.Write(buffer, 0, read);
        }
        writeStream.Flush();
    }
    catch (Exception e)
    {
        throw new CustomException($"Error occured while reading the file. Inner Exception Message: ({e.Message}) Stack Trace: ({e.StackTrace})", ErrorCode.FileReadFailure, e);
    }
}

Keep in mind I have simplified my implementation for presentation purposes, so it has not been tested.

2
  • I was just wondering, @Aleksandar if you have written unit test for your Angular decision. Thanks! Jul 22, 2022 at 11:25
  • 1
    @AntonMitsev no, I have not written any unit tests for the Angular side of things. However, it is pretty standart way to auto-download files - I have used it here for simplicity sake, in practice I would use something like File Saver - npmjs.com/package/file-saver. Jul 25, 2022 at 7:11
1

The answers I found were either not working on Angular 13.1 and/or unnecessary complex (like the accepted example) without explaining why this is necessary. It would be useful for constantly changing ecosystems like Angular to require the version number to be attached.

The mini snippet provided by user @Aleksandar Angelov bypasses the session system, so an unnecessary authorization is necessary.

Derived by his answer, I came up with the following code:

  downloadConfiguration(url: string, filename: string) {
    this.http.get(url, {responseType: 'blob'})
    .subscribe(data => {
      // console.log("data", data);
      var url = window.URL.createObjectURL(data);
      let downloadLink = document.createElement('a');
      downloadLink.href = url
      downloadLink.setAttribute('download', filename);
      downloadLink.click();
    });
  }
0

If you only send the parameters to a URL, you can do it this way:

downloadfile(runname: string, type: string): string {
   return window.location.href = `${this.files_api + this.title +"/"+ runname + "/?file="+ type}`;
}

in the service that receives the parameters

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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