gpt4 book ai didi

javascript - 如何使用angularjs通过单击按钮将图像下载到我们的本地?

转载 作者:搜寻专家 更新时间:2023-11-01 05:04:34 24 4
gpt4 key购买 nike

嗨,我是 angularjs 的新手我在 stackoverflow 上看到了很多关于此的问题,但找不到好的解决方案。

<button ng-click="download()">download</button>

我的要求是(1) 我不想使用 <a>标签

(2) 我不想使用 <download>属性,因为所有浏览器都应该支持它。

当用户点击下载按钮时,图像应该下载到客户端的本地机器上。

假设图片来自某个 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>

最佳答案

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>

关于javascript - 如何使用angularjs通过单击按钮将图像下载到我们的本地?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31402116/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com