Question

我正在开发angularjs javascript项目，在此我需要下载该文件。

我将文件上传到服务器并且我有访问它们的路径，现在我需要下载它们，就像我们在浏览器中下载文件中看到的那样，为了实现这一点，我需要创建具有物理文件路径的blob对象。

就像我的路径是http://localhost:8080/app/ns.jpg一样，所以我可以给 app / ns.jpg ，我想要它的blob对象。

文件类型可以是任何类型。如何创建blob以从已知路径下载文件？

Answer 1

您可以使用$http service将responseType设置为arraybuffer / blob。

与native javascript solution没什么不同。

＆＃13;

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$http', '$window', function MyCtrl($scope, $http, $window) {
  var ctrl = this;
  
  ctrl.download = download;
  
  var imgUrl = 
  '//cors-anywhere.herokuapp.com/http://www.wallpapersxl.com/get/2339478';
  
  function download () {
    $http.get(imgUrl, { responseType: 'arraybuffer' }).then(function (response) {
      ctrl.file = new Blob([response.data], {type: 'image/jpeg'});
      ctrl.url = getUrl(ctrl.file);
    });
  }
  
  function getUrl (blob){
    var url = $window.URL || $window.webkitURL;
    return url.createObjectURL(blob);
  }
  
  $scope.$ctrl = ctrl;
}]);

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl as $ctrl">  
    <button ng-click="$ctrl.download()" class="testBtn">
      Download
    </button>


    <div ng-if="$ctrl.file">
      <span>{{$ctrl.file.size}} -- {{$ctrl.file.type}}</span>
      <img ng-src="{{$ctrl.url}}" />
    </div>
  </div>
</div>

＆＃13;

使用js中的物理路径创建blob对象

1 个答案: