Pdf.js: Não é possível usar a mesma tela durante várias operações de render()

Criado em 28 ago. 2018  ·  13Comentários  ·  Fonte: mozilla/pdf.js

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?

1-other

Comentários muito úteis

Alguma atualização para esse problema ?

Todos 13 comentários

@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.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

liuzhen2008 picture liuzhen2008  ·  4Comentários

hp011235 picture hp011235  ·  4Comentários

smit-modi picture smit-modi  ·  3Comentários

SehyunPark picture SehyunPark  ·  3Comentários

brandonros picture brandonros  ·  3Comentários