BLOB形式のWebページでPDFのプレビューやPDFの一部を隠す-Angular

Question

PDFファイルのBLOB表現を使用している場合、Angular ControllerにHTMLページを公開していますファッションに従って：

//controller 
function (data) { 

     var fileBack = new Blob([(data)], { type: 'application/pdf' }); 
     var fileURL = URL.createObjectURL(fileBack); 
     $scope.content = $sce.trustAsResourceUrl(fileURL); 
} 

//html 
<object ng-show="content" data="{{content}}" type="application/pdf" style="width: 100%; height: 400px;"></object> 

文書の一部をブラウザに表示しているときにマスクするにはどうすればよいですか？このような例は、（ただこれはところで可能であることを証明したい）私は考えることができることを、次のとおりです

- Hiding the 2nd page of a document 
    - Overlapping a image to hide some Width x Height space 

本の方法を任意の上の任意のアイデアが実現されるだろうか？ BLOB形式ではない場合は、まったく可能ですか？このようなタスクを達成するためには、どのような要件を満たす必要がありますか。ブラウザで

成功例：https://studysoup.com/western-kentucky-university/econ-202/one-week-of-notes/econ-202-notes-week-9?id=864095

Answer 1

あなたがhttps://github.com/akrennmair/ng-pdfviewerとhttps://github.com/mozilla/pdf.jsこれを行うことができます。以前私はこの指令にいくつかの変更を加え、この作業を行った。私は深く入るつもりはないが、私はあなたのための模範を作った。作成されたPlunkerが何らかの形でそれを実行することができませんhttps://plnkr.co/edit/xOIYGvTFJ2bU2rawg9Wc?p=preview。ここに完全な例https://drive.google.com/open?id=0Bzls0-jRP-7GMHFnQWJwUUxRYWsがあります。サーバー上で実行してください。

angular.module('ngPDFViewer', []). 
directive('pdfviewer', ['$parse', function ($parse) { 
     var canvas = null; 
     var instance_id = null; 
     var excludedPages = []; 
     return { 
      restrict : "E", 
      template : "<div class='make-scrollable'></div>", 
      scope : { 
       onPageLoad : '&', 
       loadProgress : '&', 
       src : '@', 
       id : '=', 
       excludedPages : '=' 
      }, 
      controller : ['$scope', function ($scope) { 
        $scope.pageNum = 1; 
        $scope.pdfDoc = null; 
        $scope.scale = 1.0; 

        $scope.documentProgress = function (progressData) { 
         if ($scope.loadProgress) { 
          $scope.loadProgress({ 
           state : "loading", 
           loaded : progressData.loaded, 
           total : progressData.total 
          }); 
         } 
        }; 

        $scope.loadPDF = function (path) { 
         console.log('loadPDF ', path); 
         PDFJS.getDocument(path, null, null, $scope.documentProgress).then(function (_pdfDoc) { 
          $scope.pdfDoc = _pdfDoc; 
          $scope.renderPages($scope.pageNum, function (success) { 
           if ($scope.loadProgress) { 
            $scope.loadProgress({ 
             state : "finished", 
             loaded : 0, 
             total : 0 
            }); 
           } 
          }); 
         }, function (message, exception) { 
          console.log("PDF load error: " + message); 
          if ($scope.loadProgress) { 
           $scope.loadProgress({ 
            state : "error", 
            loaded : 0, 
            total : 0 
           }); 
          } 
         }); 
        }; 

        $scope.renderPages = function (num, callback) { 
         $scope.$apply(function() { 
          $scope.onPageLoad({ 
           page : $scope.pageNum, 
           total : $scope.pdfDoc.numPages 
          }); 
         }); 
         for (var num = 1; num <= $scope.pdfDoc.numPages; num++){ 
          var exist = $.inArray(num, excludedPages); 
          if(exist===-1){ 
           $scope.pdfDoc.getPage(num).then(function(page) { 
            $scope.renderPage(page, num) 
           }) 
          } 
         } 
        }; 

        $scope.renderPage = function(page, num) { 
         var viewport = page.getViewport($scope.scale); 
         var canvas = document.createElement('canvas'); 
         var ctx = canvas.getContext('2d'); 
         canvas.height = viewport.height; 
         canvas.width = viewport.width; 
         $('.make-scrollable').append(canvas); 
         $('.make-scrollable').height(viewport.height - 100); 
         page.render({ canvasContext: ctx, viewport: viewport }).promise.then(
          function() { 
           console.log("Rendered"); 
          } 
         ) 

        } 

        $scope.$on('pdfviewer.nextPage', function (evt, id) { 
         if (id !== instance_id) { 
          return; 
         } 

         if ($scope.pageNum < $scope.pdfDoc.numPages) { 
          $scope.pageNum++; 
          $scope.renderPage($scope.pageNum); 
         } 
        }); 

        $scope.$on('pdfviewer.prevPage', function (evt, id) { 
         if (id !== instance_id) { 
          return; 
         } 

         if ($scope.pageNum > 1) { 
          $scope.pageNum--; 
          $scope.renderPage($scope.pageNum); 
         } 
        }); 

        $scope.$on('pdfviewer.gotoPage', function (evt, id, page) { 
         if (id !== instance_id) { 
          return; 
         } 

         if (page >= 1 && page <= $scope.pdfDoc.numPages) { 
          $scope.pageNum = page; 
          $scope.renderPage($scope.pageNum); 
         } 
        }); 
       } 
      ], 
      link : function (scope, iElement, iAttr) { 
       canvas = iElement.find('canvas')[0]; 
       instance_id = iAttr.id; 
       excludedPages = scope.$parent.excludePages; 
       iAttr.$observe('src', function (v) { 
        console.log('src attribute changed, new value is', v); 
        if (v !== undefined && v !== null && v !== '') { 
         scope.pageNum = 1; 
         scope.loadPDF(scope.src); 
        } 
       }); 
      } 
     }; 
    } 
]). 
service("PDFViewerService", ['$rootScope', function ($rootScope) { 

     var svc = {}; 
     svc.nextPage = function() { 
      $rootScope.$broadcast('pdfviewer.nextPage'); 
     }; 

     svc.prevPage = function() { 
      $rootScope.$broadcast('pdfviewer.prevPage'); 
     }; 

     svc.Instance = function (id) { 
      var instance_id = id; 

      return { 
       prevPage : function() { 
        $rootScope.$broadcast('pdfviewer.prevPage', instance_id); 
       }, 
       nextPage : function() { 
        $rootScope.$broadcast('pdfviewer.nextPage', instance_id); 
       }, 
       gotoPage : function (page) { 
        $rootScope.$broadcast('pdfviewer.gotoPage', instance_id, page); 
       } 
      }; 
     }; 

     return svc; 
    } 
]);