我正在使用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,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？
任何帮助将不胜感激。 预先谢谢。！