angularangular2-servicesangular-http

Download a file from asset folder when clicking on a button


I am working on an angular2 project, I have a file in assets folder and I have created a button to download the file while running the app.

I see there are quite a many solutions to the above problem so i got confused. Can you please help.

<button pButton type="button" (click)="f1()" label="Download Sample Defaults 
XML File"></button>

I need code for f1() which can help me download the file to my Download folder when clicking on above button. Help appreciated. Thanks


Solution

  • You can either

    Style an anchor element to look like a button and set it's href to assets/file. The download attr helps to directly download file instead to opening in new tab.

    <a download="CoolfileName.xyz" href="assets/file">Download here</a>
    

    Or create an anchor element on the fly, set it's href element and click it.

    Something like:

    let link = document.createElement('a');
    link.setAttribute('type', 'hidden');
    link.href = 'assets/file';
    link.download = path;
    document.body.appendChild(link);
    link.click();
    link.remove();