jhipsterアプリケーションでサーバーからクライアントに.docxファイルを送信する

Question

私はJhipsterを使用しています。

私はdocx4jを使用して.docxファイルを作成しています。

この.docxファイルをサーバーからクライアントにダウンロードします。

しかし、ダウンロードしたファイルが破損しています。サーバー側では

：

私は自分のファイルを生成し、[]

WordprocessingMLPackage p = null; 
... 
File f = new File(filePath); 
p.save(f); 
byte[] stream = Files.readAllBytes(f.toPath()); 

バイトに入れて、私は別の形式でクライアントに送信しようとしています：

バイト[]

バイト[]エンコードされたBase64

私はバイト[]またはStringとしての私のファイルを取得

：

// send back as String encoded in Base64 
public ResponseEntity<FileDTO> getFile(@PathVariable Long id) throws URISyntaxException, IOException { 
    FileDTO result = fillRepository.findOne(id); 
    byte[] stream = FileUtil.getFile(id) // retrieve file as byte[] 
    byte[] encoded = Base64.encodeBase64(stream); 
    String encodedString = new String(encoded, "UTF-8"); 
    result.setFile(encodedString); 
    return ResponseUtil.wrapOrNotFound(Optional.ofNullable(result)); 
} 

クライアント側：3210

文字列

文字列は、Base64

のは、私の方法どのように見えるかの例をエンコード私はダウンロードするためにそれをblobに入れます。

FileService.get({id: id}, function(result) { 
    var res = result.file; 
    // var res = Base64.decode(result.file); 
    vm.blob = new Blob([res], {type: 'data:attachment;charset=utf-8;application/vnd.openxmlformats-officedocument.wordprocessingml.document'}); 
    vm.url = (window.URL || window.webkitURL).createObjectURL(vm.blob); 
}); 

私のサービスは、次のように宣言されています：

(function() { 
    'use strict'; 
    angular 
     .module('myApp') 
     .factory('FileService', FileService); 
    FileService.$inject = ['$resource', 'DateUtils']; 
    function FileService($resource, DateUtils) { 
     var resourceUrl = 'api/file/:id/generate'; 
     return $resource(resourceUrl, {}, { 
      'get': { 
       method: 'GET', 
       responseType:'arraybuffer' 
}});}})(); 

私は、ファイルの単語をダウンロードするときは言う：私たちは見つけたので

は「申し訳ありません私たちはfile.docx開くことができません。そのコンテンツに問題があります。

そして私は例えば、私の元のファイルとメモ帳でダウンロード1 ++を比較するとき、私はエンコード/デコードの問題があったように、バイナリコンテンツはまったく同じではないことがわかり...また

サイズが同じではありません：

オリジナルファイル13Ko

ダウンロードファイル18Ko

あなたはどのように、なぜダウンロードしたファイルが破損している知ることに私を助けてもらえます。

Answer 1

私は最終的に解決策を見つけました。レスポンスで変換なしのバイナリを直接返信しました。 ウィンドウでアクセスしてください。注釈なしの場所

I新しいレストコントローラー：@RequestMapping("/api")

@RestController 
public class FileGenerationResource { 
    ... 
    @GetMapping("/file/{id}") 
    @Timed 
    public void getFile(@PathVariable Long id, HttpServletResponse response) throws URISyntaxException, IOException { 
     FileInputStream stream = fileService.getFile(id); 
     response.setContentType("application/vnd.openxmlformats-officedocument.wordprocessingml.document"); 
     response.setHeader("Content-disposition", "attachment; filename=test.docx"); 
     IOUtils.copy(stream,response.getOutputStream()); 
     stream.close(); 
    } 
} 

コントローラ含量：

(function() { 
    'use strict'; 

    angular 
     .module('myApp') 
     .controller('MyController', MyController); 

    MyController.$inject = ['$timeout', '$scope', '$stateParams', '$uibModalInstance']; 

    function MyController ($timeout, $scope, $stateParams, $uibModalInstance) { 
     var vm = this; 
     vm.clear = clear; 
     vm.dwl = dwl; 

     function dwl (id) { 
      window.location = "http://localhost:8080/file/"+id; 
      vm.clear(); 
     } 

     function clear() { 
      $uibModalInstance.dismiss('cancel'); 
     } 
    } 
})();