AngularJSを使用してサーバーからファイルをダウンロードして保存する

Question

次の問題があり、解決方法が見つかりません。 私はSpring Bootでエンドポイントを作成しました。私がPostmanを使用しているときに、身体要求に応じた画像が返ってきました。

しかし、Angular and BlobとFileSaverを使用してコンピュータにファイルをダウンロードして保存しようとすると、保存したファイルを読み取ることができません。

これは私の角度コントローラです：

 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); 
      }) 
    } 

とここに私の終点です：

@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"); 
     } 
    } 
} 

マイヘッダ：問題が

を解決

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

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); 
      }) 
    } 

私はresponseTypeを追加しました：$ HTTP

Answer 1

に「ブロブ」私はあなたが戻ってあなたの$ http.getコールからバイト配列を取得していないことを推測すると思います。私は非常によく、簡単な作品の角度で特別なダウンロードサービスを持っている

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

を：：

(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がhereからです追加してみてください。 ContentDispositionParserあなたは何も使うことはできません。自分自身を書くことができます。これは、簡単な作業ではありませんが、ファイル自体を保存することに直接接続していないので、適切なファイル名を取得するためにのみ使用します（例：jsで名前を追加することができます）。