指令创建[下载]按钮

Directive to create a[download] button

本文关键字：按钮 下载 创建 指令      更新时间：2023-09-26

我得到了帮助保存json作为文件在客户端这里。代码非常短，就像这个小提琴。

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

我试图创建一个angularjs指令，以便它调用范围内的方法来获取数据。沿着这条线。

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));
        }
    };
});

这行不通。如何将链接小提琴变成指令?

这样怎么样:

下面是指令代码:

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));
     }
  };
});

控制器:

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"});
  }
});

我最后在这里试图解决一个类似的问题。在我的Angular页面中，我有一个通过Ajax检索的JSON，它被渲染为HTML，但我希望"原始"JSON可以通过链接下载。

OP和大多数人投票的方法的问题是HTML DOM是在你的控制器中被操纵的，这有点违背了使用MVVM的目的。我认为你做这一切的原因是因为Angular阻止了blob链接的创建(通过在生成的blob URL前加上'unsafe:')。

幸运的是，Angular提供了一种将特定URL前缀应用白名单的方法，这样当你使用URL.createObjectURL()时它就不会被阻止了。在本例中，我们包括blob

这是我对它在JSFiddle上运行的看法

相关文章：