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

by

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="https://stackoverflow.com/questions/21628378/{{content}}" style="width:200px;height:200px;"></embed>

More Related Contents:

  1. AngularJS: Service vs provider vs factory
  2. File Upload using AngularJS
  3. AngularJS Multiple ng-app within a page
  4. AngularJS ui router passing data between states without URL
  5. How to POST binary files with AngularJS (with upload DEMO)
  6. What is the difference between ng-app and data-ng-app?
  7. Error with $http.get in angularJS — Success not a Function [duplicate]
  8. Does my ng-model really need to have a dot to avoid child $scope problems?
  9. How to generate url encoded anchor links with AngularJS?
  10. Using Bootstrap for Angular and Material design for Angular together
  11. How to pass data between sibling components without using $scope?
  12. Update scope value when service data is changed
  13. calling method of parent controller from a directive in AngularJS
  14. Enable angular-ui tooltip on custom events
  15. AngularJS – How can I do a redirect with a full page load?
  16. How to simulate a drag and drop action in protractor?
  17. How do I store a current user context in AngularJS?
  18. Math functions in AngularJS bindings
  19. How to return image from $http.get in AngularJS
  20. What is the Angular ui-router lifecycle? (for debugging silent errors)
  21. How do I create an AngularJS UI bootstrap popover with HTML content?
  22. How to getText on an input in protractor
  23. How do I handle right-click events in angular.js?
  24. AngularJS $watch vs $watchCollection: which is better for performance?
  25. Call Angular Function with Jquery
  26. AngularJS – why is $apply required to properly resolve a $q promise?
  27. How to use the axios library with AngularJS
  28. $sce.trustAsResourceUrl() globally
  29. Auto logout with Angularjs based on idle user
  30. Angularjs – Hide content until DOM loaded

Leave a Comment