Usando a versão mais recente do pdfjs (2.0.550), recebo o seguinte erro:
Não é possível usar a mesma tela durante várias operações de render().
O código que estou usando para renderização é o seguinte:
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];
});
});
}
Essa parte do código é do projeto js de anotação:
https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js
Como você também pode ver, todas as páginas têm sua própria tela. Então, não sei por que ainda recebo esse erro.
O que está acontecendo de errado e onde eu preciso olhar?
@atnsm mano, posso saber se você está usando anotações em PDF em Angular 2+?
Eu não acho. Aqui está a lista de todas as dependências:
https://github.com/instructure/pdf-annotate.js/blob/master/package.json
Mesmo problema, como resolver isso.
Vendo o mesmo erro com o react-pdf-js
que é um wrapper em torno pdfjs-dist
.
Usando a versão mais recente do pdfjs (2.0.550), recebo o seguinte erro:
É bem possível que este problema seja uma duplicata do #9456, caso em que foi corrigido pelo PR #9853 (que não chegou a tempo de ser incluído na versão 2.0.550
).
Eu também diria isso. Vamos fechar isso e sempre podemos reabrir se a versão 2.0 final for concluída e o problema persistir.
Eu me deparo com o mesmo problema. Ajuda necessária.
Alguma atualização para esse problema ?
Eu tenho esses problemas quando uso pdfjs em angular 8. espero poder ajudar alguém:
public ngOnDestroy() {
if (this._pdf) {
this._pdf.destroy();
}
if (this.renderTask) {
this.renderTask.cancel();
}
}
na função de renderização, você deve obter o elemento canvas por: this.element.nativeElement.children[0] em vez de consultar com documento dom
Alguma atualização para esse problema ?
Estou tendo o mesmo problema, usando uma única tela para mostrar os documentos e o usuário pode selecionar um dos vários documentos para mostrar
Estou tendo o mesmo problema, usando uma única tela para mostrar os documentos e o usuário pode selecionar um dos vários documentos para mostrar
Você deve cancelar e destruir o processo de renderização de pdf antes de renderizar um novo arquivo pdf
Alguém poderia explicar a maneira correta de cancelar e renderizar novamente a mesma página?
De outros problemas que vi, você não deve usar a mesma tela para executar duas tarefas de renderização de uma só vez. E você tem que esperar que o anterior termine (o que eu não quero fazer) ou cancelá-lo.
Mas chamar cancel
na tarefa anterior ainda não resolve o problema em que às vezes uma página é renderizada de cabeça para baixo, o que supostamente acontece se você estiver executando duas tarefas de renderização na mesma tela.
A solução do @huannxdev também exige que você destrua o pdf. Mas eu não quero ter que recarregá-lo apenas para renderizar novamente uma única página.
Comentários muito úteis
Alguma atualização para esse problema ?