scaricare un file utilizzando Angular JS e un servizio Web RESTful basato su Spring

Question

Utilizzo Spring boot e Angular JS. Ho un controller Spring REST che utilizzo per scaricare un file. quando lo chiamo usando http://localhost:8080/download funziona e il file viene scaricato. Ora ho un pulsante, quando clicco su di esso, il file verrà scaricato. così ho scritto una funzione nel mio controller angular js per ottenere l'url del mio servizio web di primavera ma quando l'ho provato non è successo niente. Cosa devo fare per risolvere il problema? C'è un modo migliore per scaricare file usando Spring e Angular?

/** 
* 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(); 

} 

mia angolare funzione js (ho aggiunto console.log ("ok") per vedere se ho un risultato dal controller primavera ed è stampato ok)

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

e il mio tasto

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

Answer 1

Non è possibile scaricare il file perché Angular si aspetta una risposta JSON. Devi dire ad Angular che riceverai ArrayBuffer in risposta.

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

Answer 2

E 'di lavoro per me: di controllo

• Primavera: 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 Servizio: 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 config: app.js

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

• AngularJs regolatore: 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

Ho risolto questo problema utilizzando il seguente:

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

e chiamare getReport() utilizzando ng-click dalla pagina html.