Question

我正在使用angularjs（客户端）项目开发Web应用程序（c＃）。我们要求在网页上显示带有下一个/上一个按钮选项的pdf。为此，我们使用了pdf.js（由Mozilla Foundation提供），并且按照给定的示例实现了代码。我们已经创建了一个角度指令来使事物正常工作。第一次加载页面时一切正常，现在要指出：

加载新的源URL后，它抛出以下错误：

pdf.js？v = 1641729671：12170未捕获（已承诺）错误：在多次render（）操作期间无法使用同一画布。使用其他画布，或确保先前的操作被取消或完成。
at InternalRenderTask.initializeGraphics (pdf.js?v=1641729671:12170)
at pdf.js?v=1641729671:10666

我已经尝试过以下方面的事情：

试图通过重新链接指令来呈现pdf。
试图通过页面清理功能呈现所有pdf，但仍然会导致问题。
试图通过取消两者之间的页面来呈现pdf页面，但是它不起作用。
试图清除画布和上下文并重新初始化它，但没有窍门。
试图通过不同的不同IDS创建动态画布，但这没有用。
试图分配类而不是pdf查看器的ID，但这没用。

我在Google上进行了研究，但没有任何有效的解决方案:( 现在，让我发布我的客户端代码以更好地理解。

以下是我的指令代码：

angular.module('angularPDFView', [])
.directive('pdfviewer', ['$parse', function ($parse) {
    var canvas = null;
    var instance_id = null;
    var context = null;

    return {
        restrict: "E",
        template: '<canvas></canvas>',
        scope: {
            onPageLoad: '&',
            loadProgress: '&',
            src: '@',
            id: '='
        },
        controller: ['$scope', function ($scope) {
            $scope.pageNum = 1;
            $scope.pdfDoc = null;
            $scope.scale = 1.0;
            $scope.rotation = 0;
            $scope.pageNumPending = null;
            $scope.renderTask;
            $scope.path = null;
            $scope.getRandomSpan = function () {
                return Math.floor(Math.random() * 1000000000);
            };

            $scope.loadPDF = function (path) {

                $scope.path = path;
                var randNum = $scope.getRandomSpan();
                pdfjsLib.GlobalWorkerOptions.workerSrc = '/Content/js/pdf.worker.js?v=' + randNum;

                console.log('loadPDF ', path);
                $scope.scale = 1.0;
                $scope.rotation = 0;

                var loadingTask = pdfjsLib.getDocument(path);

                loadingTask.promise.then(function (_pdfDoc) {

                    $scope.pdfDoc = _pdfDoc;
                    $scope.renderPage($scope.pageNum);
                });
            };

            $scope.renderPage = function (num) {
                pageRendering = true;

                // Using promise to fetch the page
                $scope.pdfDoc.getPage(num).then(function (page) {

                    if ($scope.renderTask) {
                        try {
                            $scope.renderTask.cancel();
                        } catch (e) {
                            //
                        }
                    }

                    var viewport = page.getViewport({ scale: $scope.scale });

                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    // Render PDF page into canvas context
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport,
                        continueCallback: function (cont) {
                            cont();
                        }
                    };

                    $scope.renderTask = page.render(renderContext);

                    // Wait for rendering to finish

                    try {
                        $scope.renderTask.promise.then(function () {

                            pageRendering = false;
                            if ($scope.pageNumPending !== null) {
                                // New page rendering is pending
                                $scope.renderPage($scope.pageNumPending);
                                $scope.pageNumPending = null;
                            }

                            $scope.$apply(function () {
                                $scope.onPageLoad({
                                    page: $scope.pageNum,
                                    total: $scope.pdfDoc.numPages
                                });
                            });

                        });
                    } catch (e) {
                        //
                    }
                });

                // Update page counters
                $scope.pageNum = num;
            };

            $scope.queueRenderPage = function (num) {

                if (context) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    context.beginPath();
                }

                if ($scope.pageRendering) {
                    $scope.pageNumPending = num;
                } else {
                    $scope.renderPage(num);
                }
            };

            $scope.$on('pdfviewer.prevPage', function () {
                if ($scope.pageNum <= 1) {
                    return;
                }
                $scope.pageNum--;
                $scope.queueRenderPage($scope.pageNum);
            });

            /**
             * Displays next page.
             */
            $scope.$on('pdfviewer.nextPage', function () {
                if ($scope.pageNum >= $scope.pdfDoc.numPages) {
                    return;
                }
                $scope.pageNum++;
                $scope.queueRenderPage($scope.pageNum);
            });

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

                if ($scope.pdfDoc === null) {

                    $scope.pageNum = page;
                    $scope.loadPDF($scope.path);

                } else {
                    if (page >= 1 && page <= $scope.pdfDoc.numPages) {
                        $scope.pageNum = page;
                        $scope.renderPage($scope.pageNum);
                    }
                }
            });
        }],
        link: function (scope, iElement, iAttr) {
            canvas = iElement.find('canvas')[0];
            context = canvas.getContext('2d');

            instance_id = iAttr.id;

            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("angularPDFViewerService", ['$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');
            },
            nextPage: function () {
                $rootScope.$broadcast('pdfviewer.nextPage');
            },
            gotoPage: function (page) {
                $rootScope.$broadcast('pdfviewer.gotoPage', instance_id, page);
            }
        };
    };

    return svc;
}]);

..

如何取消渲染操作，或者是否可以使用其他画布加载PDF？

任何帮助将不胜感激。预先谢谢。！

Answer 1

使用“正在渲染”标志：

var renderInProgress;
var renderTask;

if (renderInProgress) {

   //ensure previous operations were cancelled or completed.

   .then(function() {
       renderTask = doRender();
   });
} else {
    renderTask = doRender();
};

function doRender() {
    renderInProgress = true;
    var renderOp = page.render(renderContext);

    renderOp.promise = renderOp.promise.then(function () {
        //Do whatever
    }).finally(function() {
        renderInProgress = false;
    });

    return renderOp;
}

Answer 2

经过两天的努力，我终于解决了pdf加载问题，控制台错误仍然存在，但现在功能正常运行：）

我发布的答案可能会对某人有所帮助，这是我所做的一些小步骤：

访问：https://cdnjs.com/libraries/pdf.js

我已经从上述链接下载了最新版本的PDF.js和Pdf-worker.js。只需将我的旧参考库替换为较新的参考库即可。

现在在我的角度应用程序中它就像魅力一样！！

错误：在多次render（）操作期间无法使用同一画布。 PDF.js问题

2 个答案: