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

javascript angularjs angularjs-directive imagedownload

22,022

Solution 1

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>

Solution 2

You can achieve this with the help of BLOB object

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=preview New Pluncker Auto download: http://plnkr.co/edit/eevPO2fh3F37Yhvchnol?p=preview

22,022

Author by

shreyansh

Web Developer

Updated on July 09, 2022

Comments

shreyansh almost 2 years
Hi I am new to angularjs and I saw a lot of questions on stackoverflow regarding this, but was not able to find a good solution.
```
<button ng-click="download()">download</button>
```
My requirement is (1) I don't want to use <a> tag

(2) I don't want to use <download> attribute, because it should be supported in all browsers.

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>
```