HTTPステータスが200であるにもかかわらずAngularはファイルイベントをダウンロードしません

Question

DBからファイルをダウンロードする方法を作成しました。フロントエンド側の全体の方法は、ステータス200を返しますが、全体のファイルが見えます：

Javaコントローラ：

@PreAuthorize("hasAnyAuthority('CLIENT', 'WORKER')") 
    @RequestMapping(value = "", method = RequestMethod.GET, produces = MediaType.ALL_VALUE) 
    public ResponseEntity<byte[]> downloadFile(@RequestParam("id") Long id, HttpServletRequest httpRequest, HttpServletResponse response) throws FileNotFoundException, IOException{ 
     File file = fileService.downloadFile(id); //custom File class 
     if (file == null) { 
      return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null); 
     } 
     byte[] base64Bytes = Base64.encodeBase64(file.getData()); 
     HttpHeaders header = new HttpHeaders(); 
     header.setContentType(new MediaType("application", "pdf")); 
     header.set("Content-Disposition", "inline; filename=" + file.getName()); 
     header.setContentLength(file.getData().length); 

     return ResponseEntity.ok().headers(header).body(base64Bytes); 

    } 

JS Controllerファイル：

$scope.downloadFile = function (id) { 
      FileService.get({id: id}).$promise.then(function(result) { 
       console.log('download file'); 
      }); 
     } 

HTMLファイル：

<li> 
<button ng-click="downloadFile(f.id)">{{f.name}}</button> 
</li> 

私が持っているブラウザでは：

Answer 1

Content-Dispositionの代わりにattachment：inlineを試してみてください。

Answer 2

実装が簡単になるように、angular-file-saverをご覧ください。

あなたがダウンロードしてangular-file-saverプラグインのパスを含める必要があります：まず

<script src="libs/angular-file-saver.bundle.js"></script>

をあなたの角度モジュールでngFileSaver含めることを忘れないでください：

angular.module('app', ['ngFileSaver']);

をし、またFileSaverを注入し、 Blobあなたのダウンロードファイルコントローラへの依存性：

今

app.controller('ExampleCtrl', ['$scope', 'FileSaver', 'Blob', function ($scope, FileSaver, Blob) {

実装部品：

あなたはBASE64を変換する必要がまず

function b64toBlob(b64Data, contentType, sliceSize) { 
    contentType = contentType || ''; 
    sliceSize = sliceSize || 512; // sliceSize represent the bytes to be process in each batch(loop), 512 bytes seems to be the ideal slice size for the performance wise 

    var byteCharacters = atob(b64Data); 
    var byteArrays = []; 

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { 
     var slice = byteCharacters.slice(offset, offset + sliceSize); 

     var byteNumbers = new Array(slice.length); 
     for (var i = 0; i < slice.length; i++) { 
     byteNumbers[i] = slice.charCodeAt(i); 
     } 

     var byteArray = new Uint8Array(byteNumbers); 

     byteArrays.push(byteArray); 
    } 

    var blob = new Blob(byteArrays, { type: contentType }); 
    return blob; 
} 

最後に、ちょうど

var blob = b64toBlob(fileData.documentStream, fileData.contentType); 
FileSaver.saveAs(blob, fileData.name + '.' + fileData.extension); 

仕事を終えるために angular-file-saverプラグインを使用したBLOBバイト

これが役立つことを願っています。