0

我正在研究 angularjs 和 java 应用程序。下面的 html 代码用于在浏览器中打开 pdf 文件。问题是当data 属性的值被动态传递时，PDF 没有被打开，如下所示。

<div ng-controller="myPDFFileController">
{{pdfName}} <!-- /resources/myFiles/test1.pdf -->
<object data="{{pdfName}}" type="application/pdf" width="100%" height="100%"> 
<iframe src="{{pdfName}}" width="100%" height="100%" style="border: none;">
    This browser does not support PDFs. Please download the PDF to view it: 
</iframe>
</object>

js代码：

    app.controller('myPDFFileController', function ($scope,MyService) {
    $scope.getPDFPathFileName = function () {
    MyService.getPDF().then(
    function (response) {
    $scope.pdfName = "/resources/myFiles/"+response;
    },
    function (errResponse) {
    $rootScope.showError("Internal error" + errResponse);
    });
    }
    $scope.getPDFPathFileName();
    });
    //service call
    myService.getPDF = function(){
     var Url = myURL+'/filesDataLink/getPDF.form';
    $http.get(repUrl)
    .then(
    function (response) {
       //return response
    }
   //return statement
    }

java控制器：

@RequestMapping(value = "/getPDF", method = RequestMethod.GET,produces="text/plain")
public @ResponseBody String getPDF(HttpServletRequest request) throws Exception {
//code to creae a pdf file and return the filename 
String filename = "test1";
File f = new File(filename);
//logic to generate pdf file with data
return filename;
}
}

在浏览器控制台中发现异常：

Failed to load resource: the server responded with a status of 404 () :8080/%7B%7BpdfName%7D%7D

请建议如何在运行时动态传递文件名并使 PDF 在浏览器上打开。当我在 html 代码本身中给出文件名而不是动态加载时，下面的代码有效。

将文件名分配给数据属性时的工作 html 代码：

<object data="/resources/myFiles/test1.pdf" type="application/pdf" width="100%" height="100%">
<iframe src="/resources/myFiles/test1.pdf" width="100%" height="100%" style="border: none;">
This browser does not support PDFs. Please download the PDF to view it: 
</iframe>
</object>

--EDIT-- 现在我可以在 IE 和 chrome 的网页中看到 pdf 图像，但问题是 IE 在加载 pdf 之前显示警报。下面是加载页面时出现在 IE 中的警告框图像，关闭警告框后显示 pdf。控制台中未显示任何错误。 在此处输入图像描述

4

2 回答 2

0

我在我的项目中遇到了同样的问题。看看它是否有帮助。

代码

<object ng-if="!IEBrowser" data="{{content}}" type="application/pdf" style="width: 100%; height: 1200px;overflow-y: hidden; cursor:pointer;"></object> 
<iframe ng-if="IEBrowser" id ="pdfIframe" ></iframe>

控制器

 $scope.caseid =$rootScope.finalCeilingValue.caseId;

    $http.get(appConstant.selfDomainName+appConstant.downloadCreditPaper+"?"+"caseid="+$scope.caseid, {responseType: 'arraybuffer'})

          .success(function (data) {
             /* if(data){
          var file = new Blob([data], {type: 'application/pdf'});

            var fileURL = URL.createObjectURL(file);

        //   $scope.content = fileURL;
              }*/

                        if($scope.caseid != null && $scope.caseid != ''){
                                     $scope.content =  appConstant.selfDomainName+appConstant.downloadCreditPaper+"?"+"caseid="+$scope.caseid;
                             if(window.navigator.msSaveOrOpenBlob){
                                     $scope.IEBrowser = true;
                                      $timeout(function() {
                                                 document.querySelector('#pdfIframe').setAttribute('src',$scope.content);
                                                  }, 0);
                             } else {
                                 $scope.IEBrowser = false;
                             }
            ////        $scope.content = appConstant.selfDomainName+appConstant.downloadCreditPaper+"?"+"caseid="+$scope.caseid;


                        } 
        else{ $scope.message.code = "Unable to load";
                                   $scope.message.color = genericAPIFactory.amber;
                                   $scope.$emit("approvalFlowWarning",$scope.message);
                                     }
          }).finally(function() {
            $scope.loading = false;
          })
于 2017-07-16T21:12:41.680 回答
0

更新

刚刚注意到在 SO 中已经有了更好的答案。查看链接： https ://stackoverflow.com/a/21752504/5739073

原始答案。

它不起作用的原因是因为您使用的是src属性而不是ng-src属性。

两者之间的区别在于，当您使用ng-src它时，它会等到该范围变量有一个值，然后再将其添加到 DOM，因此 HTML 认为它是硬编码的。

于 2017-07-16T20:03:39.627 回答