Question

我正在研究angularjs和java应用程序。下面的html代码用于在浏览器中打开pdf文件。如果动态传递数据属性的值，则不会打开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 code：

    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 controller：

@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。控制台中没有显示错误。

Answer 1

更新

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

原始答案。

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

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

Answer 2

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

HTML CODE

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

在动态加载路径和文件名时无法显示pdf文件

2 个答案: