Herunterladen und Speichern von Dateien vom Server mit AngularJS

Question

Ich habe folgendes Problem und ich kann keine Lösung finden. Ich habe Endpunkt mit Spring Boot erstellt und wenn ich Postman verwende, erhalte ich eine Antwort mit Bild auf Körperanforderung.

Aber wenn ich versuche, Datei herunterladen und auf dem Computer mit Angular und Blob und FileSaver speichern meine gespeicherte Datei kann nicht lesen.

Das ist mein Winkelregler:

 vm.download = function (filename) { 
     console.log("Start download. File name:", filename); 
     $http.get('api/files/download/' + filename) 
      .then(function (response) { 
       console.log(data); 
       var data = new Blob([response.data], {type: 'image/jpeg;charset=UTF-8'}); 
       FileSaver.saveAs(data, filename); 
      }) 
    } 

und hier ist mein Endpunkt:

@RequestMapping(value = "/files/download/{id:.*}", method = RequestMethod.GET) 
@ResponseBody 
@Timed 
public void DownloadFiles(@PathVariable String id, HttpServletRequest request, HttpServletResponse response) throws IOException { 

    MongoClient mongoClient = new MongoClient(); 
    DB mongoDB = mongoClient.getDB("angularspingproject"); 


    BasicDBObject query = new BasicDBObject(); 
    query.put("filename", id); 

    GridFS fileStore = new GridFS(mongoDB, "fs"); 
    GridFSDBFile gridFSDBFile = fileStore.findOne(query); 

    if (gridFSDBFile != null && id.equalsIgnoreCase((String) gridFSDBFile.getFilename())) { 
     try { 
      response.setContentType(gridFSDBFile.getContentType()); 
      response.setContentLength((new Long(gridFSDBFile.getLength()).intValue())); 
      response.setHeader("content-Disposition", "attachment; filename=" + gridFSDBFile.getFilename()); 

      IOUtils.copyLarge(gridFSDBFile.getInputStream(), response.getOutputStream()); 
     } catch (IOException e) { 
      throw new RuntimeException("IOError writting file to output stream"); 
     } 
    } 
} 

Mein Kopf:

Cache-Control: no-cache, no-store, max-age=0, must-revalidate 
Content-Length: 316707 
Content-Type: image/jpeg;charset=UTF-8 
Pragma: no-cache 
Server:Apache-Coyote/1.1 
X-Application-Context : angularspingproject:8080 
X-Content-Type-Options : nosniff 
X-XSS-Protection: 1; mode=block 
content-Disposition: attachment; filename=main_page.jpg 

@Edit Problem behoben

vm.download = function (filename) { 
     $http.get('api/files/download/' + filename, {responseType:'blob'}) 
      .then(function (response) { 
       console.log(response); 
       var data = new Blob([response.data], {type: 'image/jpeg;charset=UTF-8'}); 
       FileSaver.saveAs(data, filename); 
      }) 
    } 

Ich habe response: 'Blob' auf $ http

Answer 1

Ich würde vermuten, dass Sie nicht ein Byte-Array zurück von Ihrem $ http.get Anruf bekommen. Versuchen Sie:

vm.download = function (filename) { 
var config = {headers: { 
     'Accept': "image/jpeg" 
    } 
}; 
$http.get('api/files/download/' + filename, config).then(function (response)    { 
     var myBuffer= new Uint8Array(response.data); 

    var data = new Blob([myBuffer], {type: 'image/jpeg;charset=UTF-8'}); 
    FileSaver.saveAs(data, filename); 
     }) 
} 

Answer 2

Ich habe einen speziellen Download-Service in Winkel, die sehr gut und einfach funktioniert:

(function() { 
    angular.module('common') 
     .factory('downloadService', ['$http', '$window', 'contentDispositionParser', 
      function ($http, $window, contentDispositionParser) { 
       return { 
        downloadFile: downloadFile 
       }; 

       function downloadFile(url, request) 
       { 
        $http({ 
         url: url, 
         method: 'GET', 
         params: request, 
         responseType: 'blob' 
        }) 
        .success(function (data, status, headers, config){ 
         var disposition = headers('Content-Disposition'); 
         var filename = contentDispositionParser.getFileName(disposition); 
         $window.saveAs(data, filename); // This is from FileSaver.js 
        }); 
       } 

      }]); 
})(); 

Filesaver.js von here ist. ContentDispositionParser Sie können alles verwenden oder sich selbst schreiben, es wird nur verwendet, um den richtigen Dateinamen zu bekommen, da es scheinbar keine einfache Aufgabe ist, aber nicht direkt mit dem Speichern der Datei selbst verbunden ist (Sie könnten den Namen zB in js hinzufügen)