How to connect jsReport in AngularJS?

Question

I now have a problem with JSReport .. It was assumed that I already have an API ... Now I want to associate it with my client side, which uses AngularJS.

If I use Postman, it will return the pdf file I want. But my problem is how to show that this is my page when I submit it using angularjs ..

I have a code like this:

controller

$scope.Print = function () { authService.print().then(function(result){ var _result = result; }); }; 

Service

 var _print = function () { var data = { "template": { "shortid": "byQtwHLPQ" } }; return $http.post("http://192.168.8.87/api/report", data).then(function (result) { return result; }); }; authServiceFactory.print = _print; 

Now I have this code and it does not work ... I assumed that it has no return, so I delete the return and just publish, but still it does not work, and even the PDF download did not work.

Anyone can help please ...

Answer 1

Use like that.

controller

 var parameter = { "template": { "shortid": "ZkMoslfdX" }}; PrintService.Print(parameter).then(function (result) { var file = new Blob([result.data], { type: 'application/pdf' }); var fileURL = URL.createObjectURL(file); $scope.content = $sce.trustAsResourceUrl(fileURL); }); 

Service

 var reportUrl = "http://192.168.8.87/api/report"; var _print = function (parameter) { return $http.post(reportUrl, parameter, { responseType: 'arraybuffer' }).success(function (response) { return response; }); }; 

The basic idea is that result.data converted to blob and creates objectURL so that it is readable, and the object tag and $sce.trustAsResourceUrl used to trust angular to your URL

HTML

 <object data="{{content}}" type="application/pdf" style="width:100%;height:80%"></object> 

I refer to this AngularJS post : Show blob (.pdf) in angular app for clarification, just read it.