javascript 如何使用angularjs通过单击按钮将图像下载到我们的本地？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31402116/
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
How to download an image by clicking on button into our local using angularjs?
提问by shreyansh
Hi I am new to angularjsand I saw a lot of questions on stackoverflow regarding this, but was not able to find a good solution.
嗨，我是新手angularjs，我在 stackoverflow 上看到了很多关于此的问题，但找不到好的解决方案。
<button ng-click="download()">download</button>
My requirement is
(1) I don't want to use <a>tag
我的要求是（1）我不想使用<a>标签
(2) I don't want to use <download>attribute, because it should be supported in all browsers.
(2) 我不想使用<download>属性，因为它应该在所有浏览器中都支持。
When user clicks on download button the image should get downloaded to client's local machine.
当用户点击下载按钮时，图像应该被下载到客户端的本地机器。
Assume the image is coming from some url
假设图像来自某个网址
<script>
angular.module('myApp', []);
angular.module('myApp').controller('HomeCtrl', ['$scope', '$http', function($scope, $http) {
$scope.download=function()
{
$http.get(url).success(function(data){
// code to download image here
}).error(function(err, status){})
}
}]);
</script>
回答by Omer Leshem
angular.module('myApp', []).controller('HomeCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.download = function() {
$http.get('https://unsplash.it/200/300', {
responseType: "arraybuffer"
})
.success(function(data) {
var anchor = angular.element('<a/>');
var blob = new Blob([data]);
anchor.attr({
href: window.URL.createObjectURL(blob),
target: '_blank',
download: 'fileName.png'
})[0].click();
})
}
}
]);<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="HomeCtrl">
<button ng-click="download()">download</button>
</div>
</body>
</html>回答by Shubham Nigam
You can achieve this with the help of BLOB object
您可以在 BLOB 对象的帮助下实现此目的
HTML
HTML
<body ng-app="myApp">
<div ng-controller="HomeCtrl">
<button ng-click="download()">download</button>
<img id="photo"/>
</div>
</body>
Angular code:
角度代码：
angular.module('myApp', []);
angular.module('myApp').controller('HomeCtrl', ['$scope', '$http', function($scope, $http) {
$scope.download=function()
{
$http.get('https://placeholdit.imgix.net/~text?txtsize=15&txt=image1&w=120&h=120', {responseType: "arraybuffer"}).success(function(data){
var arrayBufferView = new Uint8Array( data );
var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL( blob );
var img = document.querySelector( "#photo" );
img.src = imageUrl;
// code to download image here
}).error(function(err, status){})
}
function SaveToDisk(fileURL, fileName) {
// for non-IE
if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
save.download = fileName || 'unknown';
var event = document.createEvent('Event');
event.initEvent('click', true, true);
save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
}
// for IE
else if ( !! window.ActiveXObject && document.execCommand) {
var _window = window.open(fileURL, '_blank');
_window.document.close();
_window.document.execCommand('SaveAs', true, fileName || fileURL)
_window.close();
}
}
}]);
Plunker for the solution:http://plnkr.co/edit/IKQKWkY6YMwodzpByx0f?p=previewNew Pluncker Auto download: http://plnkr.co/edit/eevPO2fh3F37Yhvchnol?p=preview
Plunker 解决方案：http: //plnkr.co/edit/IKQKWkY6YMwodzpByx0f?p=preview 新 Pluncker 自动下载：http: //plnkr.co/edit/eevPO2fh3F37Yhvchnol?p=preview
