如果我的 Angular Controller 中有一个 PDF 文件的 BLOB 表示，我将按以下方式在我的 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

最佳答案

你可以用这个来做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;
    }
]);

关于javascript - 从 BLOB 格式 -Angular 实现 PDF 预览或在网页中隐藏部分 PDF，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36296220/