7

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...

4

1 回答 1

4

像这样使用..

控制器

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

服务

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

主要思想是将result.data转换为 blob 并创建一个objectURL以便它可读和object标签，并$sce.trustAsResourceUrl用于信任 angular 到您的URL

HTML

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

我参考了这篇文章AngularJS: Display blob (.pdf) in an angular app以进行澄清，只需阅读该文章即可。

于 2014-09-17T09:50:53.763 回答