How to connect jsReport in AngularJS?

Question

I have a problem now about JSReport.. It assumed that I already have an API...What I want now is how to link it with my Client Side which uses AngularJS.

If I use Postman it will return a pdf file which is what I want. But my problem is how to show it is my page when i post 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 that Code and its not working... I assumed it has no return so I remove the return and just post but still it didn't work and even downloading the pdf didn't work on it.

Anyone can help Please...

Answer 1

Use like this one..

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 main idea is that the result.data is converted into a blob and create an objectURL so that it is readable and to 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 post AngularJS: Display blob (.pdf) in an angular app for clarification just read that one.