Using AngularJS how to check a PDF file exist in a folder or not?

javascript angularjs pdf

16,242

Solution 1

You can make a http request to determine if the file exists as long as you are on the same domain as the pdf file.

For a given student ID (which in your code appears to be response.student_id) it looks like this:

if(response.student_id) {  
    var url = 'http://www.example.com/s-pdf/' + response.student_id + '.pdf';
    var request = new XMLHttpRequest();
    request.open('HEAD', url, false);
    request.send();
    if(request.status == 200) {
        $scope.pdfData = true;
        $scope.StudentPDFFile =  response.student_id+'.pdf';
    } else {
        $scope.pdfData = false;
    }
} else {
    $scope.pdfData = false;
}

The 'HEAD' is all that is necessary to ensure that the file exists; you could also use 'GET' but it doesn't seem like you need the whole file in this situation.

Solution 2

This is another way. You can make a directive and verify an attrib with this directive and set anything you want in the element.

angular.module('myApp')
.directive('imgCheck', ['$http', function($http){
        return {
            link: function(scope, element, attrs){
                $http.get('/img/'+attrs.imgCheck)
                     .success(function(data, status){
                        if(status==200){
                            attrs.$set('src','/img/'+attrs.imgCheck)
                        }else{
                            attrs.$set('src','/img/not-found.png')
                        }
                     })
                     .error(function(data,status){
                        if(status==200){
                            attrs.$set('src','/img/'+attrs.imgCheck)
                        }else{
                            attrs.$set('src','/img/not-found.png')
                        }
                     });
            }
        };

}]);

HTML

<figure class="podcast-item col-md-2" ng-repeat="image in images">
    <a href="#">
        <img class="img-thumbnail" img-check="{{image.url}}" />
    </a>
</figure>

Solution 3

ng-show seems more appropriate:

<div ng-show="pdfData">
     <span class="font-10">Download Performance Report</span>
     <a href="http://www.example.com/s-pdf/{{StudentPDFFile}}" target="_blank"> click here</a> 
</div>

For 1000, put it in a ng-repeat then you should better, test all the PDFs in one request and keep it in a cached list.

16,242

Author by

user1187

SOreadytohelp

Updated on June 15, 2022

Comments

user1187 almost 2 years

I have a list of students.
For some students I have to show a link, and on clicking this link their progress card should load (it is a .pdf file). For others, the link should not be shown.

I have done this by giving the same student id to their progress card and if it is this particular student then show the link; otherwise, don't show the link. I can do it this way for only 5 or 6 students. I cant do this for 1000 students.

The following is my AngularJS code:

if (response.student_id == 'SD0001' || response.student_id == 'SD0002' || response.student_id == 'SD0004') {  
    $scope.pdfData = true;
    $scope.StudentPDFFile =  response.student_id+'.pdf';
} else {
    $scope.pdfData = false;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<body id="ng-app" ng-app>
    <div ng-switch on="pdfData">
        <div ng-switch-when="false"></div>
        <div ng-switch-when="true">
            <span class="font-10">Download Performance Report</span>
            <a href="http://www.example.com/s-pdf/{{StudentPDFFile}}" target="_blank"> click here</a>
        </div>
    </div>
</body>

Here I haven't specified the controller, this is skeleton functionality is working for me.

For 1000 records how I can do this?