How to Display blob (.pdf) in an AngularJS app

Question

I have been trying to display pdf file which I am getting as a blob from a $http.post response. The pdf must be displayed within the app using <embed src> for example.

I came across a couple of stack posts but somehow my example doesn't seem to work.

JS:

According to this doc, I went on and tried...

$http.post('/postUrlHere',{myParams}).success(function (response) {  var file = new Blob([response], {type: 'application/pdf'});  var fileURL = URL.createObjectURL(file);  $scope.content = fileURL; }); 

Now from what I understand, fileURL creates a temporary URL that the blog can use as a reference.

HTML:

<embed src="{{content}}" width="200" height="200"></embed> 

I am not sure how to handle this in Angular, the ideal situation would be to (1) assign it to a scope, (2) 'prepare/rebuild' the blob to a pdf (3) pass it to the HTML using <embed> because I want to display it within the app.

I have been researching for more than a day now but somehow I can't seem to understand how this works in Angular... And let's just assume the pdf viewer libraries out there weren't an option.

Answer 1

First of all you need to set the responseType to arraybuffer. This is required if you want to create a blob of your data. See Sending_and_Receiving_Binary_Data. So your code will look like this:

$http.post('/postUrlHere',{myParams}, {responseType:'arraybuffer'})   .success(function (response) {        var file = new Blob([response], {type: 'application/pdf'});        var fileURL = URL.createObjectURL(file); }); 

The next part is, you need to use the $sce service to make angular trust your url. This can be done in this way:

$scope.content = $sce.trustAsResourceUrl(fileURL); 

Do not forget to inject the $sce service.

If this is all done you can now embed your pdf:

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed> 

Answer 2

I use AngularJS v1.3.4

HTML:

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button> 

JS controller:

'use strict'; angular.module('xxxxxxxxApp')     .controller('xxxxController', function ($scope, xxxxServicePDF) {         $scope.downloadPdf = function () {             var fileName = "test.pdf";             var a = document.createElement("a");             document.body.appendChild(a);             a.style = "display: none";             xxxxServicePDF.downloadPdf().then(function (result) {                 var file = new Blob([result.data], {type: 'application/pdf'});                 var fileURL = window.URL.createObjectURL(file);                 a.href = fileURL;                 a.download = fileName;                 a.click();             });         }; }); 

JS services:

angular.module('xxxxxxxxApp')     .factory('xxxxServicePDF', function ($http) {         return {             downloadPdf: function () {             return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {                 return response;             });         }     }; }); 

Java REST Web Services - Spring MVC:

@RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf")     public ResponseEntity<byte[]> getPDF() {         FileInputStream fileStream;         try {             fileStream = new FileInputStream(new File("C:\\xxxxx\\xxxxxx\\test.pdf"));             byte[] contents = IOUtils.toByteArray(fileStream);             HttpHeaders headers = new HttpHeaders();             headers.setContentType(MediaType.parseMediaType("application/pdf"));             String filename = "test.pdf";             headers.setContentDispositionFormData(filename, filename);             ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);             return response;         } catch (FileNotFoundException e) {            System.err.println(e);         } catch (IOException e) {             System.err.println(e);         }         return null;     }