javascript - Directive to create a[download] button - Stack Overflow

admin管理员组

文章数量:1220453

I got help to save json as file in client side here. Code is very short as in this fiddle.

var a = document.createElement('a');
a.download    = "backup.json";
a.href        = url;
a.textContent = "Download backup.json";

document.getElementById('content').appendChild(a);

I was trying to create an angularjs directive so that it calls a method in scope to get the data. Along this line.

module.directive('myDownload', function ($compile) {
    return {
        restrict:'E',
        scope:{ getData:'&getData'},
        link:function (scope, elm, attrs) {
            elm.append($compile(
                '<a class="btn" download="backup.json"' +
                    'href=' + scope.getData() + '>' +
                    'Download' +
                    '</a>'
            )(scope));
        }
    };
});

This doesn't work. How can make the linked fiddle into a directive?

I got help to save json as file in client side here. Code is very short as in this fiddle.

var a = document.createElement('a');
a.download    = "backup.json";
a.href        = url;
a.textContent = "Download backup.json";

document.getElementById('content').appendChild(a);

I was trying to create an angularjs directive so that it calls a method in scope to get the data. Along this line.

module.directive('myDownload', function ($compile) {
    return {
        restrict:'E',
        scope:{ getData:'&getData'},
        link:function (scope, elm, attrs) {
            elm.append($compile(
                '<a class="btn" download="backup.json"' +
                    'href=' + scope.getData() + '>' +
                    'Download' +
                    '</a>'
            )(scope));
        }
    };
});

This doesn't work. How can make the linked fiddle into a directive?

• javascript
• angularjs

Share Improve this question Follow edited May 23, 2017 at 11:46 CommunityBot 111 silver badge asked May 2, 2013 at 16:02 bsrbsr 58.7k8888 gold badges217217 silver badges321321 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 14

How about something like this: Fiddle

Here's the directive code:

module.directive('myDownload', function ($compile) {
  return {
    restrict:'E',
    scope:{ getUrlData:'&getData'},
    link:function (scope, elm, attrs) {
        var url = URL.createObjectURL(scope.getUrlData());
        elm.append($compile(
            '<a class="btn" download="backup.json"' +
                'href="' + url + '">' +
                'Download' +
                '</a>'
        )(scope));
     }
  };
});

Controller:

module.controller('MyCtrl', function ($scope){
  var data = {a:1, b:2, c:3};
  var json = JSON.stringify(data);

  $scope.getBlob = function(){
    return new Blob([json], {type: "application/json"});
  }
});

I ended up here trying to solve a similar issue. in my Angular page, I have a JSON retrieved via Ajax that is rendered as HTML, but I wanted the "raw" JSON to be downloadable via a link.

the issue with the OP's and most-voted approach is that the HTML DOM is manipulated within your controller, which kind of defeats the purpose of using MVVM. i think the reason you're doing all of that is because Angular blocks creation of links for blobs (by pre-pending 'unsafe:' to the resulting blob URL).

Fortunately, Angular provides a way to apply a whitelist certain URL prefixes so it will not be blocked when you use URL.createObjectURL()...in this case, we include blob

here is my take on it running on JSFiddle

本文标签： javascriptDirective to create adownload buttonStack Overflow