AngularJS & Download File using WebAPI

As you know AngularJS routing overwrites the relative urls in a hyperlink so that AngularJS can handle all the requests. This sometimes causes problems. In my scenario I want to download a file when user clicks on a hyperlink in my grid. AngularJS is not sending this request to the server as a result I am unable to serve the file user wants to download.

Here is my hyperlink code that I used in the grid.

<a href="/api/download/1">Download File</a>

As you see the above hyperlink calls an webapi which in turns returns a word document that needs to be downloaded. As mentioned above clicking on this hyperlink does not download the file.

The solution for this issue is very simple, we just need to specify the target of the “a” tag as shown below

<a target="_self" href="/api/download/1">Download File</a>

Please see my other blog on how to download a file from Web API

Export Dynamic Word document in Web API