如何在AngularJS应用程序中显示blob（.pdf）

Question

我一直试图显示pdf文件，我从一个$http.post响应中得到一个blob。pdf必须使用在应用程序中显示

我遇到了几个堆栈帖子，但不知何故，我的例子似乎不起作用。

JS:

根据这位医生的说法，我继续努力...

$http.post('/postUrlHere',{myParams}).success(function (response) {
 var file = new Blob([response], {type: 'application/pdf'});
 var fileURL = URL.createObjectURL(file);
 $scope.content = fileURL;
});

现在据我所知，fileURL创建了一个临时URL，博客可以将其用作参考。

HTML:

<embed src="{{content}}" width="200" height="200"></embed>

我不知道如何处理这个问题，理想的情况是（1）将其分配给一个作用域，（2）“准备/重建”blob到一个pdf（3）使用

我已经研究了一天多了，但不知何故，我似乎不明白这是如何在角度。。。让我们假设pdf查看器库没有选项。




Answer 1

michael的建议对我很有吸引力：）如果你替换$http。用$http发布。得到，记住，那是。get方法接受2个参数而不是3个。。。这就是浪费我时间的地方…；）

控制器：

$http.get('/getdoc/' + $stateParams.id,     
{responseType:'arraybuffer'})
  .success(function (response) {
     var file = new Blob([(response)], {type: 'application/pdf'});
     var fileURL = URL.createObjectURL(file);
     $scope.content = $sce.trustAsResourceUrl(fileURL);
});

视图：

<object ng-show="content" data="{{content}}" type="application/pdf" style="width: 100%; height: 400px;"></object>

Answer 2

我使用AngularJSV1。3.4

HTML:

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>

JS控制器：

'use strict';
angular.module('xxxxxxxxApp')
    .controller('xxxxController', function ($scope, xxxxServicePDF) {
        $scope.downloadPdf = function () {
            var fileName = "test.pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            xxxxServicePDF.downloadPdf().then(function (result) {
                var file = new Blob([result.data], {type: 'application/pdf'});
                var fileURL = window.URL.createObjectURL(file);
                a.href = fileURL;
                a.download = fileName;
                a.click();
            });
        };
});

JS服务：

angular.module('xxxxxxxxApp')
    .factory('xxxxServicePDF', function ($http) {
        return {
            downloadPdf: function () {
            return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {
                return response;
            });
        }
    };
});

Java REST Web服务-Spring MVC：

@RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf")
    public ResponseEntity<byte[]> getPDF() {
        FileInputStream fileStream;
        try {
            fileStream = new FileInputStream(new File("C:\\xxxxx\\xxxxxx\\test.pdf"));
            byte[] contents = IOUtils.toByteArray(fileStream);
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.parseMediaType("application/pdf"));
            String filename = "test.pdf";
            headers.setContentDispositionFormData(filename, filename);
            ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
            return response;
        } catch (FileNotFoundException e) {
           System.err.println(e);
        } catch (IOException e) {
            System.err.println(e);
        }
        return null;
    }

Answer 3

首先，您需要将响应类型设置为arrayBuffer。如果要创建数据Blob，则需要这样做。见Sending_and_Receiving_Binary_Data。所以你的代码会像这样：

$http.post('/postUrlHere',{myParams}, {responseType:'arraybuffer'})
  .success(function (response) {
       var file = new Blob([response], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
});

下一部分是，您需要使用$sce服务使角信任成为您的url。可以这样做：

$scope.content = $sce.trustAsResourceUrl(fileURL);

不要忘记注入$sce服务。

如果这一切都完成了，你现在可以嵌入你的pdf：

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>