CODEWITHSUNDEEP
angulardownloadhref
AvinashK
AvinashK

Reputation: 3423

Download file link not working in Angular

I have a 33 KB pdf file in my Angular website application at

src/app/components/landing-page/res/File.pdf

In my landing-page.component.html, which is located inside the landing-page folder, I wrote the following line to allow the file to be downloaded.

My File <a href="./res/File.pdf" download="File.pdf">here</a>.

However, when I open the app in browser using ng serve, and click on the link, a 705 B File.pdf is downloaded which can't be opened. The hyperlink is shown to be linked to http://localhost:4200/res/File.pdf and I think this is the source of the problem because this file path may only be valid in the angular framework.

Upvotes: 5

Views: 29659

Answers (2)

Isaac Abdala
Isaac Abdala

Reputation: 11

This worked for me:

<a  href="../../assets/file.txt" download="file.txt">here</a>

the file file.txt must be inside the assets folder.

Upvotes: 1

Suvethan Nantha
Suvethan Nantha

Reputation: 2474

Try this, cases like the following, the browser will perform a full page reload to the original link.

  • Links that contain target element:

    <a href="/ext/link?a=b" target="_self">link</a>

  • Absolute links:

    <a href="http://angularjs.org/">link</a>

  • Links starting with '/' that lead to a different base path when base is defined:

    <a href="/not-my-base/link">link</a>

As per your issue, you should use the following way. If you project path like shown below

Then below is the proper way of handling download file.

<a target="_self" href="../../assets/File.pdf" download="File.pdf">here</a>

make sure your href path is correct. Moreover assets folder should be outside angular app folder otherwise it won't work.

Angular Reference

I hope this will help you. If you have any problems or suggestions let me know.

Upvotes: 13

Related Questions