Javascript 错误：在多个render（）操作期间不能使用同一画布。PDF.js问题

我正在使用angularjs（客户端）项目开发web应用程序（c#）。 我们要求在带有下一个/上一个按钮选项的网页上显示pdf。 为此，我们使用了pdf.js（由Mozilla基金会提供），并根据给定的示例实现了代码。 我们已经创建了一个角度指示，以确保事情正常运行。 在第一次加载页面时，一切正常，现在来谈谈要点：

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

pdf.js？v=1641729671:12170未捕获（承诺中）错误：在多个render（）操作期间不能使用同一画布。使用不同的画布或确保取消或完成以前的操作

at InternalRenderTask.initializeGraphics (pdf.js?v=1641729671:12170)
at pdf.js?v=1641729671:10666

我试过以下我这边的事情：

• 试图通过重新链接指令呈现pdf
• 试图通过页面清理功能呈现所有pdf，但仍然会导致问题
• 试图通过取消其间的页面来呈现pdf页面，但无效
• 试图清除画布和上下文并重新初始化，但没有任何技巧
• 尝试通过不同的ID创建动态画布，但无效
• 试图分配类而不是pdf查看器的Id，但无效

我在谷歌上做过研究，但没有找到任何可行的解决方案：( 现在让我发布我的客户端代码，以便更好地理解

以下是我的指令代码：

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);
                }
            });
        }
    };
}])

如何取消渲染操作，或者有没有办法使用不同的画布加载PDF？

任何帮助都将不胜感激。 提前感谢。！

使用“正在渲染”标志：

---

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

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

访问：

我已经从上述链接下载了最新版本的PDF.js和PDF-worker.js。 用新的参考图书馆取代了我的旧参考图书馆，就这样

---

它现在在我的角度应用程序中工作得很有魅力

您好，谢谢您的回答。我已尝试实施您的解决方案，但不幸的是，它对我没有帮助：（我面临相同的画布错误.）。。

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;
}