Achieving a preview of a PDF or hiding parts of a PDF in a web page from BLOB format -Angular
You can do with this https://github.com/akrennmair/ng-pdfviewer and https://github.com/mozilla/pdf.js. Previously I made some changes to the directive and did this task. I'm not going into the deep but i made example for you. Created Plunker but somehow not able to run it https://plnkr.co/edit/xOIYGvTFJ2bU2rawg9Wc?p=preview. Here is the complete example https://drive.google.com/open?id=0Bzls0-jRP-7GMHFnQWJwUUxRYWs . Just run it on your server.
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; }]);