使用最新的 pdfjs 版本(2.0.550)我收到以下错误:
在多个 render() 操作期间不能使用相同的画布。
我用于渲染的代码如下:
function renderPage(pageNumber, renderOptions) {
var documentId = renderOptions.documentId;
var pdfDocument = renderOptions.pdfDocument;
var scale = renderOptions.scale;
var rotate = renderOptions.rotate;
// Load the page and annotations
return Promise.all([pdfDocument.getPage(pageNumber), _PDFJSAnnotate2.default.getAnnotations(documentId, pageNumber)]).then(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2);
var pdfPage = _ref2[0];
var annotations = _ref2[1];
var page = document.getElementById('pageContainer' + pageNumber);
var svg = page.querySelector('.annotationLayer');
var canvas = page.querySelector('.canvasWrapper canvas');
var canvasContext = canvas.getContext('2d', {alpha: false});
var viewport = pdfPage.getViewport(scale, rotate);
var transform = scalePage(pageNumber, viewport, canvasContext);
var renderContext = {
canvasContext: canvasContext,
viewport: viewport,
transform: transform
};
// Render the page
return Promise.all([pdfPage.render(renderContext), _PDFJSAnnotate2.default.render(svg, viewport, annotations)]).then(function () {
// Text content is needed for a11y, but is also necessary for creating
// highlight and strikeout annotations which require selecting text.
return pdfPage.getTextContent({normalizeWhitespace: true}).then(function (textContent) {
return new Promise(function (resolve, reject) {// Render text layer for a11y of text content
var textLayer = page.querySelector('.textLayer');
var textLayerFactory = new pdfjsViewer.DefaultTextLayerFactory();
var textLayerBuilder = textLayerFactory.createTextLayerBuilder(textLayer, pageNumber - 1, viewport);
textLayerBuilder.setTextContent(textContent);
textLayerBuilder.render();// Enable a11y for annotations
// Timeout is needed to wait for `textLayerBuilder.render`
setTimeout(function () {
try {
(0, _renderScreenReaderHints2.default)(annotations.annotations);
resolve();
} catch (e) {
reject(e);
}
});
});
});
}).then(function () {// Indicate that the page was loaded
page.setAttribute('data-loaded', 'true');
return[pdfPage, annotations];
});
});
}
那部分代码来自注释js项目:
https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js
正如您还可以看到每个页面都有自己的画布。 所以,我不知道为什么我仍然会收到这样的错误。
出了什么问题以及我需要调查的地方?
@atnsm兄弟我可以知道您是否在 Angular 2+ 中使用 PDF-annotate 吗?
我不这么认为。 以下是所有依赖项的列表:
https://github.com/instructure/pdf-annotate.js/blob/master/package.json
同样的问题,如何解决。
看到与react-pdf-js
相同的错误,它是pdfjs-dist
的包装器。
使用最新的 pdfjs 版本(2.0.550)我收到以下错误:
这个问题很可能是 #9456 的重复,在这种情况下,它已由 PR #9853 修复(它没有及时包含在版本2.0.550
中)。
我也会这么说。 让我们关闭它,如果最终的 2.0 版本完成并且问题仍然存在,我们总是可以重新打开。
我遇到了同样的问题。 需要帮助。
关于这个问题的任何更新?
当我在 angular 8 中使用 pdfjs 时遇到了这个问题。希望可以帮助某人:
公共 ngOnDestroy() {
如果(this._pdf){
this._pdf.destroy();
}
如果(this.renderTask){
this.renderTask.cancel();
}
}
在渲染函数中,您应该通过以下方式获取画布元素: this.element.nativeElement.children[0] ,而不是使用dom 文档查询
关于这个问题的任何更新?
我遇到了同样的问题,使用单个画布显示文档,用户可以选择多个文档之一来显示
我遇到了同样的问题,使用单个画布显示文档,用户可以选择多个文档之一来显示
您应该先取消然后销毁渲染 pdf 进程,然后才能渲染新的 pdf 文件
有人可以解释取消和重新呈现同一页面的正确方法吗?
从我看到的其他问题来看,您不应该使用同一个画布同时运行两个渲染任务。 而且您必须等待前一个完成(我不想这样做)或取消它。
但是在上一个任务上调用cancel
仍然不能解决有时页面被颠倒呈现的问题,如果您在同一个画布上运行两个呈现任务,就会发生这种情况。
@huannxdev的解决方案还要求您销毁 pdf。 但我不想仅仅为了重新渲染一个页面而重新加载它。
最有用的评论
关于这个问题的任何更新?