javascript 创建[下载]按钮的指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16342659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Directive to create a[download] button
提问by bsr
I got help to save json as file in client side here. Code is very short as in this fiddle.
我有帮助的JSON保存在客户端文件在这里。代码很短，就像这个小提琴一样。
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.
我试图创建一个 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));
}
};
});
This doesn't work. How can make the linked fiddleinto a directive?
这不起作用。如何将链接的小提琴变成指令？
回答by mfelix
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"});
}
});
回答by Dexter Legaspi
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.
我最终在这里试图解决类似的问题。在我的 Angular 页面中，我有一个通过 Ajax 检索的 JSON，该 JSON 呈现为 HTML，但我希望“原始”JSON 可以通过链接下载。
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).
OP 和投票最多的方法的问题是 HTML DOM 是在您的控制器内操作的，这违背了使用 MVVM 的目的。我认为你做这一切的原因是因为 Angular 阻止了为 blob 创建链接（通过在生成的 blob URL 之前添加“不安全：”）。
Fortunately, Angular provides a way to apply a whitelist certain URL prefixesso it will not be blocked when you use URL.createObjectURL()...in this case, we include blob
幸运的是，Angular 提供了一种将某些 URL 前缀列入白名单的方法，因此在您使用时不会被阻止URL.createObjectURL()......在这种情况下，我们包括blob
here is my take on it running on JSFiddle
