How to download a text file based on a generated String using AngularJS?

Question

I'm trying to get AngularJS to trigger a file download when a user clicks on a button.

The file that should download has to contain data that is generated during the script execution, so the text file's content should be built from a basic string in AngularJS.

How do I implement this?

Here is some mockup code on how I imagine this would work:

var fileContent = 'foobar';
$scope.download = function() {
  filedownload.run(fileContent, 'filename.txt');
}

Possible duplicate of How do you serve a file for download with AngularJS or Javascript? — georgeawg
– georgeawg, Commented Mar 12, 2017 at 23:02
Angular File Saver is a good polyfill for less modern browsers. — georgeawg
– georgeawg, Commented Mar 12, 2017 at 23:17

Nicolai Schmid · Accepted Answer · 2017-03-13 11:14:57Z

4

In order to achieve this you have to create an a tag in your HTML:

<a download="content.txt" ng-href="{{ url }}">download</a>

Controller:

var content = 'file content for example';
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );

And to enable the URL:

app = angular.module(...);
app.config(['$compileProvider',
    function ($compileProvider) {
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);

Source: How do you serve a file for download with AngularJS or Javascript?

edited Mar 13, 2017 at 11:14

answered Mar 12, 2017 at 22:06

Nicolai Schmid

1,0922 gold badges15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

georgeawg Over a year ago

stholzm · Accepted Answer · 2017-03-12 21:20:38Z

2

In simple cases, you can create a link with a Data URI:

var fileContent = 'foobar';
$scope.download = 'data:text/plain;base64,' + btoa(fileContent);

And then use it in your HTML template:

<a href="{{download}}">click here to download</a>

You may need to adapt the MIME type, depending on your string.

answered Mar 12, 2017 at 21:20

stholzm

3,46521 silver badges31 bronze badges

4 Comments

Nicolai Schmid Over a year ago

Thanks. This is an interesting approach. While this does generate a valid link, the download gets rejected in chrome due to an unsafe link error. For explanation: I want to create a vCard file in Angular to download and this is not the right solution. Do you have a follow up idea? Thanks!

stholzm Over a year ago

Maybe Chrome rejects it only when the site is localhost? Other than that, I am out of ideas, sorry.

Nicolai Schmid Over a year ago

I actually found a solution myself now. It's basically the same idea as yours

georgeawg Over a year ago

See AngularJS $compileProvider API Reference - aHrefSanitizationWhitelist

Collectives™ on Stack Overflow

How to download a text file based on a generated String using AngularJS?

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related