Download a file from asset folder when clicking on a button

Question

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

Gileadite

what does f1 do? – Azurite

nothing yet, its jst to fill the space. Wouldnt metter if i remove it. – Gileadite

Answer 1

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();

Azurite

UI side is fine, i need help in actual function to get file. I am taking help from pranayamr.blogspot.com/2017/12/… but its not helping – Gileadite

Your question doesn't make sense then – Azurite

yeah i modified now. Thank you – Gileadite

Great edit...... So i did understood your question and i did provide you the answer. – Azurite

link.download contains the desired name of the file to be downloaded. So, it can be modified as link.download: 'My File.csv' if you want the downloaded file to be called as "My File.csv" – Ipsambul

Answer 2

You don't need to change the template. Use this way

f1() {
    window.open('path', '_blank');
}

ex:

f1() {
   window.open('/assets/images/blabla.png', '_blank');
}

update

If you need to download file instead of opening a new tab use a link with html5 download attribute ex:

<a download="filename" target="_blank" href="/assets/images/blabla.png">
  Click here to download image
</a>

Androgen

yeah it opens file in another tab, but i need the function to download the file so i can see it in my downloads folder. thanks – Gileadite

window.open creates a popup which gets blocked by the browser most of the times. – Ipsambul

Answer 3

you can try this solution

ts file code

downloadFile(){
        let link = document.createElement("a");
        link.download = "filename";
        link.href = "assets/images/user-image.png";
        link.click();
}

html file code

<button (click)="downloadFile()">Download</button>

Bhang

yeah you gave the exact answer but i had already figured it out from @Azurite answer. So – Gileadite

Hey can we try with the httpclient ? – Parasol

Answer 4

You can try this one. Put the file in assets and give the path in href.

<a class="iconsBG" title="Excel" href='/assets/Project-2021-05-17T10_41_22.378Z.xlsx' download="Project-2021-05-17T10_41_22.378Z.xlsx"><i class="far fa-file-excel"></i></a>

Guenon

Answer 5

This should work, short sweet and simple, the "download" and "#"-"yoclickme" makes it work

<a href="{{ this.fileurl }}" download #yoclickme></a> 
    <button (click)="yoclickme.click()"> Download </button>

Galitea