Angular2 - Html link to file download routes to home after click

Question

I have an Angular2 application that expose some direct download links to files.

The files are located under :

[MY_APP_FOLDER]\src\assets\OffertFile

An example of the link href is this:

/assets/OffertFile/test.xlsx

The component.html link example is this:

<a href="/assets/OffertFile/test.xlsx" target="_self">
      <i class="fa fa-download fa-2x text-primary" aria-hidden="true"></i>
</a>

The link works, I can download the file. The problem is that once I click the link, the application routes to home...

How can I avoid this?

Thanks to support

Answer 1

Please add the download attribute to the <a> tag. This will prevent rout changes and tell the browser it is a download link:

HTML docs: https://www.w3schools.com/tags/tag_a.asp

<a href="/assets/OffertFile/test.xlsx" target="_self" download>
      <i class="fa fa-download fa-2x text-primary" aria-hidden="true"></i>
</a>