4

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

2 回答 2

6 

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>

于 2016-08-30T17:37:27.460 回答
3

您可以在 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();
    }
}
    }]);

解决方案的 Plunker：http : //plnkr.co/edit/IKQKWkY6YMwodzpByx0f?p=preview 新 Pluncker 自动下载：http ://plnkr.co/edit/eevPO2fh3F37Yhvchnol?p=preview

于 2015-07-14T11:37:29.660 回答