如何使用angularjs通过点击按钮下载图像到本地

How to download an image by clicking on button into our local using angularjs?

本文关键字：图像 下载 按钮 angularjs 何使用      更新时间：2023-09-26

嗨，我是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>

您可以借助BLOB对象

来实现这一点HTML 

<body ng-app="myApp">
 <div  ng-controller="HomeCtrl">
<button ng-click="download()">download</button>
    <img id="photo"/>
</div>
</body>

角代码:

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

普朗克的解决方案:http://plnkr.co/edit/IKQKWkY6YMwodzpByx0f?p =预览新普朗克自动下载:http://plnkr.co/edit/eevPO2fh3F37Yhvchnol?p=preview

相关文章：