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

nothing yet, its jst to fill the space. Wouldnt metter if i remove it. — Sunil Bishnoi, Jun 18 '18 at 10:43

score 30 · Accepted Answer · edited Sep 17 '19 at 12:34

30

You can either style an anchor element to look like a button and set it's href to assets/file

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

edited Sep 17 '19 at 12:34

Frederik Struck-Schøning

12,981
8
59
68

answered Jun 18 '18 at 10:43

Carsten

4,005
21
28

UI side is fine, i need help in actual function to get file. I am taking help from http://pranayamr.blogspot.com/2017/12/download-file-in-angular-js2-application.html but its not helping – Sunil Bishnoi Jun 18 '18 at 10:48
Your question doesn't make sense then – Carsten Jun 18 '18 at 11:00
1

yeah i modified now. Thank you – Sunil Bishnoi Jun 18 '18 at 11:34
Great edit...... So i did understood your question and i did provide you the answer. – Carsten Jun 18 '18 at 11:41
```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" – Vibhor Dube May 29 '20 at 04:19

score 17 · Answer 2 · edited Sep 17 '19 at 12:34

17

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>

edited Sep 17 '19 at 12:34

Frederik Struck-Schøning

12,981
8
59
68

answered Jun 18 '18 at 10:47

SFernando

1,074
10
35

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 – Sunil Bishnoi Jun 18 '18 at 10:57
```window.open``` creates a popup which gets blocked by the browser most of the times. – Vibhor Dube May 29 '20 at 04:21

score 11 · Answer 3 · edited Sep 17 '19 at 12:33

11

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>

edited Sep 17 '19 at 12:33

Frederik Struck-Schøning

12,981
8
59
68

answered Jun 18 '18 at 12:20

Krishna Rathore

9,389
5
24
48

yeah you gave the exact answer but i had already figured it out from @Carsten answer. So – Sunil Bishnoi Jun 19 '18 at 06:22
Hey can we try with the httpclient ? – kushal Baldev Nov 28 '20 at 14:41

score 2 · Answer 4 · edited May 18 '21 at 03:32

2

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>

edited May 18 '21 at 03:32

Josef

2,869
2
22
23

answered May 17 '21 at 16:26

Amit Nayak

41
2

score -2 · Answer 5 · edited Sep 17 '19 at 12:34

-2

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>

edited Sep 17 '19 at 12:34

Frederik Struck-Schøning

12,981
8
59
68

answered Feb 09 '19 at 00:04

Gavin Chebor

265
3
5

Download a file from asset folder when clicking on a button

5 Answers5

Linked

Related