javascript - 如何在 AngularJS 中连接 jsReport？

Question

我现在有一个关于 JSReport 的问题。它假设我已经有一个 API...我现在想要的是如何将它与我使用 AngularJS 的客户端链接。

如果我使用 Postman，它将返回我想要的 pdf 文件。但我的问题是当我使用 angularjs 发布它时如何显示它是我的页面..

我有这样的代码:

Controller

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

服务

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;

现在我有了那个代码，但它不起作用……我假设它没有返回，所以我删除了返回，只是发布了，但它仍然没有用，甚至下载 pdf 也没有用。

任何人都可以帮助...

Answer 1

像这样使用..

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

服务

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 用于信任您的 URL

HTML

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

我引用这篇文章AngularJS: Display blob (.pdf) in an angular app为了澄清，请阅读那个。