Downloading Files With Angular
Breaking Free From The Same Origin Policy
Developing a single page application is fun, most of the time. Crafting the perfect piece of code to get the browser do what you want, instead of what has been designed for, gives you the thrill. At times, it will feel like being on a mission to rectify a browser’s misfortune such as in this article’s case.
Downloading Files
Immagine your application store files that you allow the users to download at times. The download
attribute on a <a>
element should do the trick, at least this is what it has been introduced for, so your download code would look something like this:
The example above is meant to display a nice Material Icon Button that, when clicked, will trigger the fileName
file to download from sourcePath
.
Unfortunately, although working, this solution is cursed by the same-origin policy; Meaning the browser will download the file only when located on the very same host of your application.