使用AngularJS如何检查文件夹中是否存在PDF文件？答案

【问题标题】：Using AngularJS how to check a PDF file exist in a folder or not?使用AngularJS如何检查文件夹中是否存在PDF文件？
【发布时间】：2014-10-09 05:20:06
【问题描述】：

我有一份学生名单。
对于一些学生，我必须显示一个链接，点击此链接后，他们的进度卡应该会加载（它是一个 .pdf 文件）。对于其他人，不应显示该链接。

我通过为他们的进度卡提供相同的学生 ID 来做到这一点，如果是这个特定的学生，则显示链接；否则，不要显示链接。我只能为 5 或 6 个学生这样做。我不能为 1000 名学生这样做。

以下是我的 AngularJS 代码：

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>

这里我没有指定控制器，这是为我工作的骨架功能。

对于 1000 条记录，我该怎么做？

【问题讨论】：

告诉我重复使用我的积分的原因
如果您开始赏金，无论您是否得到答案，金额都会从您的积分中扣除。

标签： javascript angularjs pdf

【解决方案1】：

只要您与 pdf 文件在同一个域中，您就可以发出 http 请求来确定文件是否存在。

对于给定的学生 ID（在您的代码中显示为 response.student_id），它看起来像这样：

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

'HEAD' 是确保文件存在所必需的；您也可以使用'GET'，但在这种情况下您似乎不需要整个文件。

【讨论】：

request.send 不工作我在 request.send();alert("hi");它没有任何警报。所以我认为 request.send 有问题。请帮帮我
跨源请求被阻止：同源策略不允许读取链接处的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。
正如 luigi 所说，您必须与要获取的文件位于同一域中
“同域”表示如果您的 .pdf 文件位于文件夹 http://www.example.com/s-pdf/ 中，则需要从该域上的页面执行代码，例如 www.example.com/index.html
同域调试，一个超级简单的方法是在要测试的页面上使用浏览器的开发工具（通常是CTRL+SHIFT+I），然后复制粘贴即可命令进入控制台。这样你就可以乱来，并确保你在正确的域上。

【解决方案2】：

这是另一种方式。您可以创建指令并使用此指令验证属性，并在元素中设置您想要的任何内容。

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>

【讨论】：

【解决方案3】：

ng-show 似乎更合适：

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

对于 1000，将其放在 ng-repeat 中，那么您最好在一个请求中测试所有 PDF 并将其保存在缓存列表中。

【讨论】：

【解决方案4】：

这很简单，你只需要使用 ng-reapeat 和 ng-show。下面是我的小提琴示例代码，我希望它对你有用。

HTML：

<div ng-app="studentApp">
  <h2>List of Students</h2>
  <div ng-controller="studentController">

      <div ng-repeat="student in students">
          Student Name :  <strong>{{student.name}}</strong><br>
          <div ng-show="{{student.url}}"><a href="{{student.url}}" title="" >Download PDF</a><br></div>
          <hr>
      </div>

  </div>
</div>

JS：

angular.module('studentApp', [])
  .controller('studentController', ['$scope', function($scope) {
    $scope.students = [
        {name: 'John', url:'abc.com/files/1.pdf'},
        {name: 'Peter', url:''},
        {name: 'Kerry', url:'abc.com/files/1.pdf'},
        {name: 'Silly', url:'f'},
        ]




  }]);

示例：http://jsfiddle.net/asadalikanwal/3a2zvrht/3/ 只需与您一起更改 PDF 路径。有什么问题拍

【讨论】：