AngularJS显示从Spring @RestController接收的PDF(byte [])

我的要求是在表格提交/发布时在我的角度js app中显示(新标签)/下载/嵌入PDF.

我不希望服务器返回生成的PDF的唯一标识符,而是使用$window服务打开一个新窗口,其中url指向服务器端端点,该端点根据唯一标识符返回PDf.因为我需要动态生成pdf(不存储在文件系统中).

与此相似的问题AngularJS: Display blob (.pdf) in an angular app但它对我不起作用.

我的控制器

angular.module('EvaluationResultsModule').controller('CA_EvaluationResultsCtrl',[ '$scope','EvaluationResultsservice','$sce',function($scope,EvaluationResultsservice,$scE) {

        $scope.showPDF = function() {
            $scope.result = CA_EvaluationResultsservice.getEvalutaionResultPDF($scope.evaluationResults);
            $scope.result.$promise.then(function(data) {
                var file = new Blob([data],{
                    type : 'application/pdf'
                });
                var fileURL = URl.createObjectURL(filE);
                $scope.pdfContent = $sce.trustAsresourceUrl(fileURL);
            });
        }
    } ]);

我的服务

angular.module('EvaluationResultsModule').factory('EvaluationResultsservice',function($resourcE) {
    return $resource('./api/ca/evaluationResults/:dest',{},{       
        getEvalutaionResultPDF : {
            method : 'GET',params : {
                dest : "getPDF"
            },responseType : 'arraybuffer',}
    });
});

休息控制器方法

@requestMapping(value = "/getPDF",method = requestMethod.GET)
    public byte[] getEvalutaionResultPDF()  {        
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        // Generate PDF using Jasper
        Map<String,Object> model = new HashMap<String,Object>();
        List<User> usersList = null; //populated from service layer;
        JRBeanCollectionDatasource beanColDatasource = new JRBeanCollectionDatasource(usersList);
        JasperPrint jasperPrint =  jasperPrint = JasperFillManager.fillReport(this.getClass().getClassLoader().getresourceAsStream("A4.jasper"),model,beanColDatasourcE);
        JasperExportManager.exportReportToPdfStream(jasperPrint,baos);
        return baos.toByteArray();
    }

我的回复记录在控制台中

response:  Object {data: ArrayBuffer,status: 200,headers: function,config: Object,statusText: "OK"}config: Objectdata: ArrayBufferbyteLength: (...)__proto__: ArrayBufferbyteLength: [Exception: TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>]get byteLength: function byteLength() { [native code] }constructor: function ArrayBuffer() { [native code] }slice: function slice() { [native code] }__proto__: Objectheaders: function (Name) {resource: resourcestatus: 200statusText: "OK"__proto__: Object

@requestMapping(value = "/api/reports/pdf",method = requestMethod.GET)
@Timed
public @ResponseBody byte[] getOpenedEventsInPdf(httpServletResponse responsE) {
    response.setHeader("Content-Disposition","inline; filename=file.pdf");
    response.setContentType("application/pdf");
// get file in bytearray from my custom service in BACkend
    byte[] file = jasperReportsservice.getOpenedEventsReport(ReportFormat.PDF);
    return file;
}

$scope.getPdf = function(){
  $http.get('/api/reports/pdf',{responseType: 'arraybuffer'})
  .success(function (data) {
    var file = new Blob([data],{type: 'application/pdf'});
    var fileURL = URl.createObjectURL(filE);
    window.open(fileURL);
  });
}

<a ng-click="getPdf()">Show PDF</a>