title: AngularJS Display PDF (byte[]) received from Spring @RestController
body: <p>My my requirement is to either display(new tab)/download/embed a PDF  in my angular js app on form submit/post.</p>
  
  <p>I do not want the server to return a unique identifier of the generated PDF and than use $window service to open a new window with it's url pointing to a server-side endpoint which returns PDf based on unique identifier. Because I  need to generate the pdf on the fly (no storing in file system).</p>
  
  <p>Similar question to this one <a href="https://stackoverflow.com/questions/21628378/angularjs-display-blob-pdf-in-an-angular-app">AngularJS: Display blob (.pdf) in an angular app</a>   But it is not working for me. </p>
  
  <p><strong>My controller</strong></p>
  
  <pre><code>angular.module('EvaluationResultsModule').controller('CA_EvaluationResultsCtrl',
      [ '$scope', 'EvaluationResultsService', '$sce', function($scope, EvaluationResultsService, $sce) {
  
          $scope.showPDF = function() {
              $scope.result = CA_EvaluationResultsService.getEvalutaionResultPDF($scope.evaluationResults);
              $scope.result.$promise.then(function(data) {
                  var file = new Blob([data], {
                      type : 'application/pdf'
                  });
                  var fileURL = URL.createObjectURL(file);
                  $scope.pdfContent = $sce.trustAsResourceUrl(fileURL);
              });
          }
      } ]);
  </code></pre>
  
  <p><strong>My Service</strong></p>
  
  <pre><code>    angular.module('EvaluationResultsModule').factory('EvaluationResultsService', function($resource) {
      return $resource('./api/ca/evaluationResults/:dest', {}, {       
          getEvalutaionResultPDF : {
              method : 'GET',
              params : {
                  dest : "getPDF"
              },
              responseType : 'arraybuffer',
  
          }
      });
  });
  </code></pre>
  
  <p><strong>Rest Controller Method</strong></p>
  
  <pre><code>@RequestMapping(value = "/getPDF", method = RequestMethod.GET)
      public byte[] getEvalutaionResultPDF()  {        
          ByteArrayOutputStream baos = new ByteArrayOutputStream();
          // Generate PDF using Jasper
          Map&lt;String, Object&gt; model = new HashMap&lt;String, Object&gt;();
          List&lt;User&gt; usersList = null; //populated from Service layer;
          JRBeanCollectionDataSource beanColDataSource = new JRBeanCollectionDataSource(usersList);
          JasperPrint jasperPrint =  jasperPrint = JasperFillManager.fillReport(this.getClass().getClassLoader().getResourceAsStream("A4.jasper"), model, beanColDataSource);
          JasperExportManager.exportReportToPdfStream(jasperPrint, baos);
          return baos.toByteArray();
      }
  </code></pre>
  
  <p><strong>My response logged in console</strong></p>
  
  <pre><code>response:  Object {data: ArrayBuffer, status: 200, headers: function, config: Object, statusText: "OK"}config: Objectdata: ArrayBufferbyteLength: (...)__proto__: ArrayBufferbyteLength: [Exception: TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #&lt;ArrayBuffer&gt;]get byteLength: function byteLength() { [native code] }constructor: function ArrayBuffer() { [native code] }slice: function slice() { [native code] }__proto__: Objectheaders: function (name) {resource: Resourcestatus: 200statusText: "OK"__proto__: Object
  </code></pre>