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

我正在研究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>

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>

此浏览器不支持PDF。请下载PDF以查看：

--编辑-- 现在我可以在IE和chrome的网页上看到pdf图像，但问题是IE在加载pdf之前显示了一个警报。 下面是当我加载页面时IE中出现的警报框图像，关闭警报框后，会显示pdf。控制台中不显示任何错误。

更新

我只是注意到，现在已经有了一个更好的答案。查看链接：

原始答案

它不起作用的原因是您使用的是

src

属性，而不是

ng src

属性

---

两者之间的区别在于，当您使用

ng src

时，它会等到该范围变量有值后再将其添加到DOM中，因此HTML认为它是硬编码的。

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

HTML代码

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

---

可能是重复的，我尝试在中将src修改为ng src，但仍然面临相同的问题。{{pdfName}此浏览器不支持PDF。请下载PDF以查看：。任何建议都会有帮助。请查看我作为更新发布的链接。您需要编写：

此浏览器不支持PDF。请下载PDF查看：

谢谢您的帮助。您的解决方案在chrome中工作，但未能在IE中打开pdf。对于IE，我使用了用户1645290提到的解决方案，它现在也在IE中工作，但问题是在将pdf加载到IE之前，它显示警报访问被拒绝，试图修复它。是的，它在IE中不工作，它在评论中指出，但如果您查看我发送的链接，您将看到另一个选项，即创建一个在IE中工作的指令。谢谢，我已经应用了您的解决方案，使其在IE中工作，但问题是在IE中显示PDF之前，它会显示一个警报“访问被拒绝”。您是否遇到了相同的问题。已通过一些链接解决了此问题，但运气不佳。任何关于如何停止显示警报访问的建议均被拒绝..警报？从哪里来的…你们能把截图…和任何错误的控制台？如果是这样，控制台的快照也会出现。请参阅上面我的帖子，控制台中不会显示任何错误。当我在显示pdf之前加载页面时，会显示一个警报，表示访问被拒绝。

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