在上传时以角度 js 显示选定的 pdf 文件

Question

嗨，在这里我必须在角度js中上传单个/多个文件。我已使用以下链接上传文件。在这种情况下，他们已经上传了图像，但我必须上传pdf和图像。

<div class="container">
    <div ng-controller="MyCtrl" class="row">
        <button class="btn btn-primary pull-right" ng-hide="images.length == 0" ng-click="clearAll()">Clear All</button>
         <h3 ng-bind="name"></h3>
        <input type="file" ng-click="$event = $event" ng-model="display" multiple onchange="angular.element(this).scope().upload(event)" accept="image/png, image/jpeg, image/gif" />
        <div class="row">
            <div class="col-md-12"> <span ng-repeat='img in images'> <a href="#" ng-click="setImage($index)">
                 <img ng-src="{{img}}" 
                    alt="Generic placeholder thumbnail" style="max-height:100px;" class="thumbnail"/>
              </a>
            </span>
            </div>
        </div>
        <img ng-src="{{display}}" ng-hide="!display" />
         <h4>You have upload {{images.length}} images this session.
            </h4>
    </div>
</div>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
    $scope.name = "Select Files to Upload";
    $scope.images = [];
    $scope.display = $scope.images[$scope.images.length - 1];
    $scope.setImage = function (ix) {
        $scope.display = $scope.images[ix];
    }
    $scope.clearAll = function () {
        $scope.display = '';
        $scope.images = [];
    }
    $scope.upload = function (obj) {
        var elem = obj.target || obj.srcElement;
        for (i = 0; i < elem.files.length; i++) {
            var file = elem.files[i];
            var reader = new FileReader();
            reader.onload = function (e) {
                $scope.images.push(e.target.result);
                $scope.display = e.target.result;
                $scope.$apply();
            }
            reader.readAsDataURL(file);
        }
    }
})

提前谢谢。

在这里，我可以在单击选择文件时看到选定的图像。但是，如果是PDF格式，我无法看到图像。请提供PDF的解决方案。

Answer 1

您可以使用javascript和PDF.JS。

像这样的例子：

如何使用PDF将PDF转换为图像(JPEG/PNG(与Javascript.JS