我正在使用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
我已经尝试过以下方面的工作:
我曾在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?
任何帮助将不胜感激。预先谢谢。!
使用“正在进行渲染”标志:
var renderInProgress;
var renderTask;
if (renderInProgress) {
//ensure previous operations were cancelled or completed.
.then(function() {
doRender();
});
} else {
doRender();
};
function doRender() {
renderInProgress = true;
renderTask = page.render(renderContext);
renderTask.promise.then(function () {
//Do whatever
}).finally(function() {
taskInProgress = false;
});
}