rest - AngularJS Display PDF (byte[]) received from Spring @RestController -

rest - AngularJS Display PDF (byte[]) received from Spring @RestController -

my requirement either display(new tab)/download/embed pdf in angular js app on form submit/post.

i not want server homecoming unique identifier of generated pdf , utilize $window service open new window it's url pointing server-side endpoint returns pdf based on unique identifier. because need generate pdf on fly (no storing in file system).

similar question 1 angularjs: display blob (.pdf) in angular app not working me.

my controller

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); }); } } ]);

my service

angular.module('evaluationresultsmodule').factory('evaluationresultsservice', function($resource) { homecoming $resource('./api/ca/evaluationresults/:dest', {}, { getevalutaionresultpdf : { method : 'get', params : { dest : "getpdf" }, responsetype : 'arraybuffer', } }); });

rest controller method

@requestmapping(value = "/getpdf", method = requestmethod.get) public byte[] getevalutaionresultpdf() { bytearrayoutputstream baos = new bytearrayoutputstream(); // generate pdf using jasper map<string, object> model = new hashmap<string, object>(); list<user> userslist = null; //populated service layer; jrbeancollectiondatasource beancoldatasource = new jrbeancollectiondatasource(userslist); jasperprint jasperprint = jasperprint = jasperfillmanager.fillreport(this.getclass().getclassloader().getresourceasstream("a4.jasper"), model, beancoldatasource); jasperexportmanager.exportreporttopdfstream(jasperprint, baos); homecoming baos.tobytearray(); }

my response logged in console

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 #<arraybuffer>]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

i utilize code , works me:

rest controller:

@requestmapping(value = "/api/reports/pdf", method = requestmethod.get) @timed public @responsebody byte[] getopenedeventsinpdf(httpservletresponse response) { response.setheader("content-disposition", "inline; filename=file.pdf"); response.setcontenttype("application/pdf"); // file in bytearray custom service in backend byte[] file = jasperreportsservice.getopenedeventsreport(reportformat.pdf); homecoming file; }

js/angular controller;

$scope.getpdf = function(){ $http.get('/api/reports/pdf', {responsetype: 'arraybuffer'}) .success(function (data) { var file = new blob([data], {type: 'application/pdf'}); var fileurl = url.createobjecturl(file); window.open(fileurl); }); }

html fragment:

<a ng-click="getpdf()">show pdf</a>

angularjs rest spring-mvc pdf