unable to show the pdf file when the path and filename is loaded dynamically

Question

I am working on angularjs and java application. The below html code is used to open pdf file in browser.Issue is PDF is not getting opened when the value for the data attribute is passed dynamically as shown below.

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

Exception noticed in browser console:

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

Please advice how to pass the filename dynamically at runtime and make the PDF open on the browser. The below code works when i gave the filename in the html code itself instead of loading dynamically.

Working html code when the filename is assigned to data attribute:

<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-- Now I can see the pdf image in webpage both IE and chrome, but issue is IE is showing an alert before the pdf is loaded. Below is the alert box image appearing in IE when I load the page ,after I close the alert box the pdf is shown. No errors are shown in console.

Possible duplicate of [angularjs expression in html – Rabbi Shuki Gur Jul 16 '17 at 20:05 — Rabbi Shuki Gur, Jul 16 '17 at 20:05

score 0 · Answer 1 · answered Jul 16 '17 at 20:03

0

UPDATE

Just noticed that there is a better answer in SO already. Check out the link: https://stackoverflow.com/a/21752504/5739073

Original Answer.

The reason it is not working is because you are using the src attribute instead of the ng-src attribute.

The difference between the two is, that when you use the ng-src it waits until there is a value to that scope variable before adding it to the DOM, and so the HTML thinks it was hardcoded.

answered Jul 16 '17 at 20:03

Rabbi Shuki Gur

1,656
19
36

I tried modifying src to ng-src in , but still facing same issue.<div ng-controller="myPDFFileController"> {{pdfName}} <object data="{{pdfName}}" height="100%" type="application/pdf" width="100%"> <iframe height="100%" ng-src="{{pdfName}}" style="border: none;" width="100%"> This browser does not support PDFs. Please download the PDF to view it: . Any suggestions would be helpful.
– user8190500 Jul 16 '17 at 20:33

Check the link I posted as an update. you need to write: `

` – Rabbi Shuki Gur Jul 16 '17 at 20:37

thanks for the help. Your solution worked in chrome but failed to open pdf in IE. For IE i have used solution mentioned by user1645290 and it is working in IE too now, but issue is before loading the PDF in IE it is showing an alert Access is denied , trying to fix it. – user8190500 Jul 17 '17 at 15:04

Yes, it won't work in IE, it states that right in the comments, but if you look in the link that I sent, you will see another option which is to create a directive that will work in IE. https://stackoverflow.com/a/14903933/5739073 – Rabbi Shuki Gur Jul 17 '17 at 18:08

score 0 · Answer 2 · answered Jul 16 '17 at 21:12

I had the same issue in my project.See whether it helps.

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>

Controller

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

Thanks, i have applied your solution to make it work in IE but issue is before it is showing the PDF in IE, it is displaying an alert "Access is denied". Did you faced the same issue.Gone through some links to resolve that but no luck.Any suggestions how to stop displaying an alert Access is denied .. — user8190500, Jul 17 '17 at 15:07
alert? from where it is coming...can you put a screenshot...and any errs in console? if so snapshot of the console too. — Raphael, Jul 18 '17 at 12:26
Please see my post above, no errors are shown in the console.When i load the page before displaying the pdf an alert is shown saying Access is denied. — user8190500, Jul 18 '17 at 13:44
https://stackoverflow.com/questions/27463901/setting-window-location-or-window-open-in-angularjs-gives-access-is-denied-in — Raphael, Jul 18 '17 at 14:41

unable to show the pdf file when the path and filename is loaded dynamically

2 Answers2