Angular JS ve bir Spring tabanlı RESTful web hizmeti kullanarak bir dosya indirmek

Question

Bahar önyükleme ve Angular JS kullanıyorum. Dosya indirmek için kullandığım bir Spring REST Controller var. http://localhost:8080/download'u kullanarak aradığımda çalışır ve dosya indirilir. Şimdi bir butonum var, üzerine tıkladığımda, dosya indirilecek. Bu yüzden bahar web servisimin URL'sini almak için açısal js denetleyicimde bir işlev yazdım, ancak test ettiğimde hiçbir şey olmadı. Bunu düzeltmek için ne yapmalıyım? İlkbahar ve Açısal kullanarak dosyaları indirmek için daha iyi bir yolu var mı?

/** 
* Size of a byte buffer to read/write file 
*/ 
private static final int BUFFER_SIZE = 4096; 
private String filePath = "C:\\Users\\marwa\\Desktop\\marwa\\gg.jpg"; 

/** 
* Method for handling file download request from client 
*/ 
@RequestMapping (value="/download", method=RequestMethod.GET) 
public void doDownload(HttpServletRequest request, 
     HttpServletResponse response) throws IOException { 

    // get absolute path of the application 
    ServletContext context = request.getServletContext(); 
    String appPath = context.getRealPath(""); 
    System.out.println("filepath = " + filePath); 

    // construct the complete absolute path of the file 

    File downloadFile = new File(filePath); 
    FileInputStream inputStream = new FileInputStream(downloadFile); 

    // get MIME type of the file 
    String mimeType = context.getMimeType(filePath); 
    if (mimeType == null) { 
     // set to binary type if MIME mapping not found 
     mimeType = "application/octet-stream"; 
    } 
    System.out.println("MIME type: " + mimeType); 

    // set content attributes for the response 
    response.setContentType(mimeType); 
    response.setContentLength((int) downloadFile.length()); 

    // set headers for the response 
    String headerKey = "Content-Disposition"; 
    String headerValue = String.format("attachment; filename=\"%s\"", 
      downloadFile.getName()); 
    response.setHeader(headerKey, headerValue); 

    // get output stream of the response 
    OutputStream outStream = response.getOutputStream(); 

    byte[] buffer = new byte[BUFFER_SIZE]; 
    int bytesRead = -1; 

    // write bytes read from the input stream into the output stream 
    while ((bytesRead = inputStream.read(buffer)) != -1) { 
     outStream.write(buffer, 0, bytesRead); 
    } 

    inputStream.close(); 
    outStream.close(); 

} 

benim açısal js fonksiyonu (Ben bahar denetleyicisinden bir sonuç elde olmadığını görmek için console.log ("Tamam") eklenir ve Tamam baskılı)

$scope.downloadFile = function() {     
     $http({method: 'GET', url: '/download'}). 
     success(function(result) { 
         console.log("ok"); 
      }). 
    error(function(data, status, headers, config) { 
      console.log("oops"); 
     }); 
}; 

ve benim butonuna

<button class="btn btn-success" ng-click="downloadFile()">download</button> 

Answer 1

Angular JSON yanıtı beklediği için dosya indiremiyorsunuz. Açısal'ya, yanıt olarak ArrayBuffer alacağınızı söylemelisiniz.

$http.post('Api/DownloadURL',$scope.data,{responseType:'arraybuffer'}) 

Answer 2

Benim için çalışıyor:

• Bahar kontrolörü: DownloadController.java

  package com.mycompany.myapp.controller; 
  
  import java.io.File; 
  import java.io.FileInputStream; 
  import java.io.IOException; 
  import java.io.InputStream; 
  import java.io.OutputStream; 
  
  import javax.servlet.http.HttpServletRequest; 
  import javax.servlet.http.HttpServletResponse; 
  
  import org.apache.commons.io.IOUtils; 
  import org.slf4j.Logger; 
  import org.slf4j.LoggerFactory; 
  import org.springframework.http.HttpStatus; 
  import org.springframework.http.ResponseEntity; 
  import org.springframework.web.bind.annotation.ExceptionHandler; 
  import org.springframework.web.bind.annotation.RequestMapping; 
  import org.springframework.web.bind.annotation.RequestMethod; 
  import org.springframework.web.bind.annotation.RequestParam; 
  import org.springframework.web.bind.annotation.RestController; 
  
  import com.mycompany.myapp.exception.TechnicalException; 
  
  
  @RestController 
  public class DownloadController { 
  
      private final Logger log = LoggerFactory.getLogger(DownloadController.class); 
  
      @RequestMapping(value = "/download", method = RequestMethod.GET) 
      public void download(@RequestParam ("name") String name, final HttpServletRequest request, final HttpServletResponse response) throws TechnicalException { 
       log.trace("name : {}", name); 
  
       File file = new File ("src/main/resources/" + name); 
       log.trace("Write response..."); 
       try (InputStream fileInputStream = new FileInputStream(file); 
         OutputStream output = response.getOutputStream();) { 
  
        response.reset(); 
  
        response.setContentType("application/octet-stream"); 
        response.setContentLength((int) (file.length())); 
  
        response.setHeader("Content-Disposition", "attachment; filename=\"" + file.getName() + "\""); 
  
        IOUtils.copyLarge(fileInputStream, output); 
        output.flush(); 
       } catch (IOException e) { 
        log.error(e.getMessage(), e); 
       } 
  
      } 
  
  } 
  

• angularjs Hizmeti: download.service.js

  (function() { 
      'use strict'; 
  
      var downloadModule = angular.module('components.donwload', []); 
  
      downloadModule.factory('downloadService', ['$q', '$timeout', '$window', 
       function($q, $timeout, $window) { 
        return { 
         download: function(name) { 
  
          var defer = $q.defer(); 
  
          $timeout(function() { 
            $window.location = 'download?name=' + name; 
  
           }, 1000) 
           .then(function() { 
            defer.resolve('success'); 
           }, function() { 
            defer.reject('error'); 
           }); 
          return defer.promise; 
         } 
        }; 
       } 
      ]); 
  })(); 
  

• angularjs yapılandırma: app.js

  (function() { 
      'use strict'; 
  
      var myApp = angular.module('myApp', ['components.donwload']); 
      /* myApp.config([function() { 
  
      }]); 
      myApp.run([function() { 
  
      }]);*/ 
  
  
  })(); 
  

• angularjs kontrol: download.controller.js

  (function() { 
      'use strict'; 
  
      angular.module('myApp') 
       .controller('DownloadSampleCtrl', ['downloadService', function(downloadService) { 
        this.download = function(fileName) { 
         downloadService.download(fileName) 
          .then(function(success) { 
           console.log('success : ' + success); 
          }, function(error) { 
           console.log('error : ' + error); 
          }); 
        }; 
       }]); 
  })(); 
  

• index.html

  <!DOCTYPE html> 
  <html ng-app="myApp"> 
  
  <head> 
      <title>My App</title> 
      <link rel="stylesheet" href="bower_components/normalize.css/normalize.css" /> 
      <link rel="stylesheet" href="assets/styles/main.css" /> 
      <link rel="icon" href="favicon.ico"> 
  </head> 
  
  <body> 
      <div ng-controller="DownloadSampleCtrl as ctrl"> 
       <button ng-click="ctrl.download('fileName.txt')">Download</button> 
      </div> 
  
      <script src="bower_components/angular/angular.min.js"></script> 
  
      <!-- App config --> 
      <script src="scripts/app/app.js"></script> 
      <!-- Download Feature --> 
      <script src="scripts/app/download/download.controller.js"></script> 
      <!-- Components --> 
      <script src="scripts/components/download/download.service.js"></script> 
  </body> 
  
  </html> 
  

Answer 3

Aşağıdaki kullanarak bu sorun çözülür:

$scope.getReport = function() { 
    var downloadPath = 'your/spring/controller/address'; 
    window.open(downloadPath, '_blank', ''); 
} 

ve html sayfasından ng-click numaralı telefonu kullanarak getReport()'u arayın.