In my AngularJS Website I want to load .pdf documents and show them in new browser tabs. The following code works, but some things bother me:

The createdObjectURL is set as the title of the document and browser tab. That means my documents are always titled as somthing like 01d9bdca-9af2-43f0-a83f-f36fd82fd72 which is not really decent. And the visible URL isn't good, too. Instead of blob:http://localhost:8080/01d9bdca-9af2-43f0-a83f-f36fd82fd72f it would be better to have the URL I call in the service.js.

I tried to handle the filename in the HttpHeaders, but that has no effect at all :(

Another strange thing: if I do not specify the {responseType: "arraybuffer"}, the PDF-Title is displayed correctly. But there is no content, the document is empty.

Any help on how to change the filename and/or URL would be appreciated. Thank you.

JS Controller

DocumentService.getDocument().then(function(response) {
  $window.open(response, '_blank');
});

JS Service

return {
  getDocument : function () {
    return $http.get("document", {responseType: "arraybuffer"})
      .then(function(response) {
        var file = new Blob([response.data], {type: "application/pdf"});
        var fileURL = URL.createObjectURL(file);
        return fileURL;
      }
  }
}

Spring MVC ReST-Service

@RequestMapping(value = "/document", method = RequestMethod.GET)
public ResponseEntity<byte[]> getDocument(){
  try {
    File file = new File("C:\\pathToFile.pdf");
    byte[] fileContent = new byte[(int) file.lenth()];

    HttpHeaders heraders = new HttpHeaders();
    headers.setContentType(MediaType.parseMediaType("application/pdf"));
    String filename = "NameOfFile.pdf";
    headers.setContentDispositionFormData(filename, filename);  //doesn't change anything

    fileContent = File.readAllBytes(file.toPath());

    ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(fileContent, headers, HttpStatus.OK);

    return response;
  } catch (FileNotFoundException e ) {
    System.err.println("File not found " + e);
  } catch (IOException e ) {
    System.err.pringln("Error while reading file " + e);
  }
}

Short version: When a PDF file is loaded as a byte array and displayed it in a new browser tab with the AngularJS $window directive: Is there a good possibility to change the filename and URL?

In my AngularJS Website I want to load .pdf documents and show them in new browser tabs. The following code works, but some things bother me:

The createdObjectURL is set as the title of the document and browser tab. That means my documents are always titled as somthing like 01d9bdca-9af2-43f0-a83f-f36fd82fd72 which is not really decent. And the visible URL isn't good, too. Instead of blob:http://localhost:8080/01d9bdca-9af2-43f0-a83f-f36fd82fd72f it would be better to have the URL I call in the service.js.

I tried to handle the filename in the HttpHeaders, but that has no effect at all :(

Another strange thing: if I do not specify the {responseType: "arraybuffer"}, the PDF-Title is displayed correctly. But there is no content, the document is empty.

Any help on how to change the filename and/or URL would be appreciated. Thank you.

JS Controller

DocumentService.getDocument().then(function(response) {
  $window.open(response, '_blank');
});

JS Service

return {
  getDocument : function () {
    return $http.get("document", {responseType: "arraybuffer"})
      .then(function(response) {
        var file = new Blob([response.data], {type: "application/pdf"});
        var fileURL = URL.createObjectURL(file);
        return fileURL;
      }
  }
}

Spring MVC ReST-Service

@RequestMapping(value = "/document", method = RequestMethod.GET)
public ResponseEntity<byte[]> getDocument(){
  try {
    File file = new File("C:\\pathToFile.pdf");
    byte[] fileContent = new byte[(int) file.lenth()];

    HttpHeaders heraders = new HttpHeaders();
    headers.setContentType(MediaType.parseMediaType("application/pdf"));
    String filename = "NameOfFile.pdf";
    headers.setContentDispositionFormData(filename, filename);  //doesn't change anything

    fileContent = File.readAllBytes(file.toPath());

    ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(fileContent, headers, HttpStatus.OK);

    return response;
  } catch (FileNotFoundException e ) {
    System.err.println("File not found " + e);
  } catch (IOException e ) {
    System.err.pringln("Error while reading file " + e);
  }
}

Short version: When a PDF file is loaded as a byte array and displayed it in a new browser tab with the AngularJS $window directive: Is there a good possibility to change the filename and URL?

• javascript
• angularjs
• spring-mvc

Share Improve this question Follow asked Sep 23, 2016 at 9:18 FreddyFreddy 14833 silver badges1313 bronze badges 3

• 1 Can't you just open a new tab with the url to the resource returning the byte-array? Something like $window.open('localhost:xxx/api/document', '_blank'); – Amygdaloideum Commented Sep 23, 2016 at 9:24
• Thank you @DanielBornstrand, this works. The window title is now just document, but the document title (if the document gets downloaded) is the one I specified. This is not 100 percent perfect, but way better than before and also less code :) – Freddy Commented Sep 23, 2016 at 11:39
• I'll post it as an answer then! :) – Amygdaloideum Commented Sep 23, 2016 at 11:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Open a new tab with the url to the resource returning the byte-array! Something like:

$window.open('localhost:xxx/api/document', '_blank');