I have some text in a hidden textarea. When a button is clicked I would like to have the text offered for download as a .txt file. Is this possible using AngularJS or Javascript?
- Angularjs Download File From Server Example
- Angularjs Download Multiple Files From Server
- Angularjs Download Pdf File From Server
11 Answers
You can do something like this using Blob.
in your controller:
in order to enable the URL:
Aug 5, 2016 - Triggering a file download from AngularJS is not different to. In our case its generated on the server side dynamically in an.ashx, but of.
Please note that
Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object. Each of these must be released by calling URL.revokeObjectURL() when you no longer need them. Browsers will release these automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.
Source: MDN
Just click the button to download using following code.
in html
In controller
Try this
and visit this site it could be helpful for you :)
This can be done in javascript without the need to open another browser window.
Replace 'url' with the link to your file. You can put this in a function and call it with ng-click if you need to trigger the download from a button.
In our current project at work we had a invisible iFrame and I had to feed the url for the file to the iFrame to get a download dialog box. On the button click, the controller generates the dynamic url and triggers a $scope event where a custom directive I wrote, is listing. The directive will append a iFrame to the body if it does not exist already and sets the url attribute on it.
EDIT: Adding a directive
This directive responds to a controller event called downloadFile
so in your controller you do
You can set location.href to a data URI containing the data you want to let the user download. Besides this, I don't think there's any way to do it with just JavaScript.
Would just like to add that in case it doesn't download the file because of unsafe:blob:null... when you hover over the download button, you have to sanitize it. For instance,
var app = angular.module('app', []);
app.config(function($compileProvider){
I had teh same problem and spend many hours find diferent solutions, and now I join all the comments in this post.I hope it, will be helpfull, my answer was correctly tested on Internet Explorer 11, Chrome and FireFox.
HTML :
DIRECTIVE :
IN CONTROLLER:
IN SERVICE:
BACKEND(on SPRING):
If you have access to on the server, consider setting headers as answered in this more general question.
Reading the comments on that answer, it is advisable to use a more specific Content-Type than octet-stream.
Angularjs Download File From Server Example
I didnt want Static Url. I have AjaxFactory for doing all ajax operations. I am getting url from the factory and binding it as follows.
Thanks @AhlemMustapha
Not the answer you're looking for? Browse other questions tagged javascriptangularjs or ask your own question.
my API controller is returning a csv file as seen below:
and my angularjs that will send and receive the csv file is shown below:
In chrome, it downloads a file which is called document but has no file type extension.The content of the file is [Object object].
In IE10, nothing is downloaded.
What could i do to fix this?
UPDATE:This might work for you guys out there with the same problem: link
Angularjs Download Multiple Files From Server
9 Answers
Angularjs Download Pdf File From Server
Try it like :
based on the most excellent answer in this question
I used the below solution and it worked for me.
None of those worked for me in Chrome 42...
Instead my directive now uses this link function (base64 made it work):
The last answer worked for me for a few months, then stopped recognizing the filename, as adeneo commented ...
@Scott's answer here is working for me:
I had to implement this recently. Thought of sharing what I had figured out;
To make it work in Safari, I had to set target: '_self',. Don't worry about filename in Safari. Looks like it's not supported as mentioned here; https://github.com/konklone/json/issues/56 (http://caniuse.com/#search=download)
The below code works fine for me in Mozilla, Chrome & Safari;
Rather than use Ajax / XMLHttpRequest / $http to invoke your WebApi method, use an html form. That way the browser saves the file using the filename and content type information in the response headers, and you don't need to work around javascript's limitations on file handling. You might also use a GET method rather than a POST as the method returns data. Here's an example form:
In Angular 1.5, use the $window service to download a file.
The a.download is not supported by IE. At least at the HTML5 'supported' pages. :(
I think the best way to download any file generated by REST call is to use window.locationexample :