tải xuống tệp bằng Angular JS và dịch vụ web RESTful dựa trên Spring

Question

Tôi đang sử dụng Khởi động mùa xuân và JS góc. Tôi có một trình điều khiển Spring REST mà tôi sử dụng để tải xuống một Tệp. khi tôi gọi nó bằng cách sử dụng http://localhost:8080/download nó hoạt động và tệp được tải xuống. Bây giờ tôi có một nút, khi tôi nhấp vào nó, tôi tập tin sẽ được tải xuống. vì vậy tôi đã viết một chức năng trong bộ điều khiển js góc của tôi để có được url của dịch vụ web mùa xuân của tôi nhưng khi tôi thử nghiệm nó không có gì xảy ra. Tôi nên làm gì để sửa lỗi này? Có cách nào tốt hơn để tải xuống tệp bằng Spring và Angular không?

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

} 

tôi góc js chức năng (tôi đã thêm console.log ("ok") để xem nếu tôi nhận được một kết quả từ bộ điều khiển mùa xuân và nó in ok)

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

và nút của tôi

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

Answer 1

Bạn không thể tải xuống tệp vì Angular đang mong đợi phản hồi JSON. Bạn phải nói với Angular rằng bạn sẽ nhận được ArrayBuffer để phản hồi.

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

Answer 2

Đó là làm việc cho tôi: điều khiển

• mùa xuân: 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 dịch vụ: 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 điều khiển: 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

tôi giải quyết vấn đề này bằng cách sử dụng sau đây:

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

và gọi getReport() sử dụng ng-click từ trang html của bạn.