How to get AngularJS BLOB to Download PDF?

Question

Hello everyone I am really new to developing with AngularJS and I am trying to figure out how to use BLOB to download a PDF locally to a machine. I already got it to work wi

Answer 1

Tested with large files (> 1.5 GB) on

• Firefox 56.0
• Safari 11.0

Use the following in your angular controller:

$scope.download = function() {
 $http({
   method: 'GET',
   url: fileResourceUrl,
   responseType: 'blob'
 }).then(function(response) {
   var blob = response.data;
   startBlobDownload(blob, "largedoc.pdf")
 });

};

function startBlobDownload(dataBlob, suggestedFileName) {
   if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      // for IE
      window.navigator.msSaveOrOpenBlob(dataBlob, suggestedFileName);
   } else {
      // for Non-IE (chrome, firefox etc.)
      var urlObject = URL.createObjectURL(dataBlob);

      var downloadLink = angular.element('<a>Download</a>');
      downloadLink.css('display','none');
      downloadLink.attr('href', urlObject);
      downloadLink.attr('download', suggestedFileName);
      angular.element(document.body).append(downloadLink);
      downloadLink[0].click();

      // cleanup
      downloadLink.remove();
      URL.revokeObjectURL(urlObject);
  }
}

Answer 2

In you controller PHP

   return $pdf->stream();

In you controller AngularJS

$http.post('generate', {
    dateStart:  $scope.ds,
    dateEnd:    $scope.de
}, 
{
  responseType: 'arraybuffer'
}).then(function success(response) {

  var blob = new Blob([response.data], { type: "application/pdf"});
  saveAs(blob, "filename.pdf");

}, function error(error) {
    $scope.recordErrors(error);
});

Answer 3

Change your responseType from responseType: 'arraybuffer' to responseType: 'blob'

Answer 4

This code worked for me in angular 9, Yii2, while using mpdf

this._gService.download_post(`controller/action`, postData).pipe(takeUntil(this._unsubscribeAll)).subscribe(result => {

  const fileURL = URL.createObjectURL(result);

  // Direct print preview

  // const iframe = document.createElement('iframe');
  // iframe.style.display = 'none';
  // iframe.src = fileURL;
  // document.body.appendChild(iframe);
  // iframe.contentWindow.print();

  // Direct Download

  const fileName = 'Patient Report';
  const a = document.createElement('a');
  document.body.appendChild(a);
  a.href = fileURL;
  a.download = fileName;
  a.click();


}, error => {
   // show error message
});

Answer 5

Possible Try-

HTML:

<button ng-click="downloadPdf()" >Download PDF</button>

JS controller:

'use strict';
var app = angular.module('app')
    .controller('ctrl', function ($scope, MathServicePDF) {
        $scope.downloadPdf = function () {
            var fileName = "file_name.pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            ServicePDF.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:

app.factory('ServicePDF', function ($http) {
        return {
            downloadPdf: function () {
            return $http.get('api/my-pdf', { responseType: 'arraybuffer' }).then(function (response) {
                return response;
            });
        }
    };
});

Happy Helping!