Spring Boot Angular2, zurück PDF in JSON

Question

Ich habe eine Spring Boot REST API, die ein PDF zurückgeben muss. Ich habe das PDF in ein Byte-Array konvertiert, dann habe ich es in Base64 codiert, bevor ich es an den Client zurücksende.

Hier sind meine Schnittstelle:

@ApiOperation(value = "Update an existing form", notes = "Update an existing form ", response = Void.class, tags={ }) 
    @ApiResponses(value = { 
      @ApiResponse(code = 200, message = "form response", response = Void.class), 
      @ApiResponse(code = 200, message = "unexpected error", response = Void.class) }) 
    @RequestMapping(value = "/forms/{formId}/submissions/{submissionId}/pdf", 
      method = RequestMethod.GET) 
    ResponseEntity<Resource> pdf(
      @ApiParam(value = "Id of the form that needs to be updated", required = true) @PathVariable("formId") Long formId, 
      @ApiParam(value = "Id of the submission that needs to be updated", required = true) @PathVariable("submissionId") Long submissionId, 
      @ApiParam(value = "token to be passed as a header", required = true) @RequestHeader(value = "token", required = true) String token 
    ); 

Und die implementierte Methode:

@Override 
    public ResponseEntity<Resource> pdf(@ApiParam(value = "Id of the form that needs to be updated", required = true) @PathVariable("formId") Long formId, @ApiParam(value = "Id of the submission that needs to be updated", required = true) @PathVariable("submissionId") Long submissionId, @ApiParam(value = "token to be passed as a header", required = true) @RequestHeader(value = "token", required = true) String token) { 
     String name = JWTutils.getEmailInToken(token); 

     if(name == null) { 
      return new ResponseEntity<>(HttpStatus.FORBIDDEN); 
     } 

     User user = userRepository.findByEmail(name); 

     if(user == null){ 
      return new ResponseEntity<>(HttpStatus.FORBIDDEN); 
     } 

     Form form = formRepository.findById(formId); 

     if(form == null){ 
      return new ResponseEntity<>(HttpStatus.NOT_FOUND); 
     } 

     Submission submission = submissionRepository.findOne(submissionId); 

     if(submission == null){ 
      return new ResponseEntity<>(HttpStatus.NOT_FOUND); 
     } 

     //Saving the document 
     final PDPage singlePage = new PDPage(); 
     final PDFont courierBoldFont = PDType1Font.COURIER_BOLD; 
     final int fontSize = 12; 
     ByteArrayOutputStream out = new ByteArrayOutputStream(); 
     try (final PDDocument document = new PDDocument()) 
     { 
      document.addPage(singlePage); 
      final PDPageContentStream contentStream = new PDPageContentStream(document, singlePage); 
      contentStream.beginText(); 
      contentStream.setFont(courierBoldFont, fontSize); 
      contentStream.newLineAtOffset(150, 750); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.showText("Hello PDFBox"); 
      contentStream.endText(); 
      contentStream.close(); // Stream must be closed before saving document. 
      //document.save("pdfs/" + UUID.randomUUID().toString() + ".pdf"); 
      document.save(out); 
     } 
     catch (IOException ioEx) 
     { 
      ioEx.printStackTrace(); 
     } 

     byte[] b64 = Base64.getEncoder().encode(out.toByteArray()); 
     ByteArrayResource resource = new ByteArrayResource(b64); 

     return ResponseEntity.ok() 
       .contentLength(b64.length) 
       .contentType(MediaType.parseMediaType("application/octet-stream")) 
       .body(resource); 
    } 

Und hier ist der Code in Angular2:

generatePdf(){ 
    this.submissionService.generatePdf(this.form.id, this.submission.id).then(data => { 
     console.log(JSON.stringify(data)); 
     let file = new Blob([atob(data._body)]); 
     FileSaver.saveAs(file, 'helloworld.pdf') 
    }).catch(error => { 
     console.log(error); 
    }); 
} 

Die PDF-i in der Nutzlast erhalten sieht so aus: PasteBin

Wenn ich das heruntergeladene PDF öffne, enthält es nur eine Seite, die leer ist, während das reale PDF Text enthält. Irgendeine Idee was passiert? Ich denke, es geht um Kodierung.

---

SOLUTION

Ich musste meine GET-Anfrage in meinem Dienst ändern. Ich habe dies auf meine Anfrage responseType: ResponseContentType.Blob;

return this.http.get(this.formsUrl + "/" + formId + "/submissions/" + submissionId + "/pdf", {headers: headers, responseType: ResponseContentType.Blob}) 
     .toPromise() 
     .then(res => res) 
     .catch(this.handleError); 

Answer 1

SOLUTION

hinzugefügt Ich musste meine GET-Anfrage in meinem Dienst ändern. Ich habe diese auf meine Anfrage hinzugefügt responseType: ResponseContentType.Blob;

return this.http.get(this.formsUrl + "/" + formId + "/submissions/" + submissionId + "/pdf", {headers: headers, responseType: ResponseContentType.Blob}) 
     .toPromise() 
     .then(res => res) 
     .catch(this.handleError);