title: Blob is not generating pdf correctly
body: <p>I have created a pdf generator service that makes a call to the backend to retrieve the data needed to make a pdf blob. For some reason, when the blob opens, Google Chrome (or any browser for that matter) states: "Failed to load PDF document." I receive no errors in the console and my preview headers show the data is getting stored in my front end values. I am getting 200's on my http.post as well. Below is my code.</p>
  
  <p><strong>Blob code</strong></p>
  
  <pre><code>    angular.module( 'utilitiesServices' ).factory( 'pdfGenerator', ['$q', '$timeout', '$window', function ($q, $timeout, $window) {
  
  
  var service = {};
  
  /**
   * @memberof pdfGenerator
   * @description
   *  Generates a pdf from given data
   **/
  function _print(data) {
  
      if (data !== null || data !== undefined) {
  
          var bytes = data
  
        var file = new Blob([bytes], { type: 'application/pdf' });
  
  
        $timeout(function () {
            //IE compatabilty
            if (window.navigator &amp;&amp; window.navigator.msSaveOrOpenBlob) {
  
                window.navigator.msSaveOrOpenBlob(file, 'report.pdf');
  
            }
            else {
  
                var objectUrl = window.URL.createObjectURL(file);
                $window.open(objectUrl);
  
            }
  
        });
  
    }
  
  };
  
  /**
  * Print the pdf
  * @param data
  * @returns {*}
  */
  service.generatePDF = function (data) {
  
      var deferred = $q.defer();
  
      deferred.resolve(
  
          _print(data)
  
      );
  
      return deferred.promise;
  
  };
  
  return service;
  </code></pre>
  
  <p>}]);</p>
  
  <p><strong>Call to the backend to retrieve the PDF data</strong></p>
  
  <pre><code>service.prototype.getPDF = function (id) {
  
          var deferred = $q.defer();
  
          this.loading.GetPDF = true;
  
          $http.post('service/api/GetPdf', JSON.stringify(id), { responseType: 'arraybuffer' })
              .then(function successCallback(response) {
  
                      return deferred.resolve(response);
  
                  },
                  function errorCallback(error) {
  
                      return deferred.reject(error);
  
                  });
  
          return deferred.promise;
  
      };
  </code></pre>
  
  <p><strong>Front-end response and call to the http.post function</strong></p>
  
  <pre><code>    $scope.getPDF = function (id) {
  
          $scope.data.loading = true;                                // Show the loading graphic
  
  
          tracking.getPdf(id).then(function (data) {
  
              // Tell the user that the pdf data was succesfully retrieved
              ngToast.create({
                  className: 'success',
                  content: 'Success!'
              });
  
              pdfGenerator.generatePDF(data);                       // Create the pdf using the retrieved data
  
          }, function (error) {
  
              // Tell the user that there was an error getting data for the pdf
              ngToast.create({
                  className: 'warning',
                  content: 'Error',
                  animation: 'slide'
              });
  
          }).finally(function () {
              $scope.data.loading = false;                        // Turn off the loading graphic
          });
  
      };
  </code></pre>
  
  <p>I have tried changing the blob type, double-checking my back-end code (which checks out and does send the correct data to the front-end), and stepped through each piece of code to make sure everything is grabbing the data it needs.</p>
  
  <p>Another pair of eyes would help tremendously. Any additional information you all need, please let me know. This bug has been driving me crazy for the past couple of days.</p>