Pdf.js: Bei mehreren render()-Vorgängen kann nicht dieselbe Leinwand verwendet werden

Erstellt am 28. Aug. 2018  ·  13Kommentare  ·  Quelle: mozilla/pdf.js

Mit der neuesten pdfjs-Version (2.0.550) erhalte ich die folgende Fehlermeldung:

Bei mehreren render()-Vorgängen kann nicht dieselbe Leinwand verwendet werden.

Der Code, den ich zum Rendern verwende, lautet wie folgt:

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];
                    });
                });
            }

Dieser Teil des Codes stammt aus dem Annotation js-Projekt:
https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js

Wie Sie auch sehen können, hat jede Seite eine eigene Leinwand. Also, ich weiß nicht, warum ich immer noch einen solchen Fehler bekomme.

Was läuft schief und wo muss ich nachsehen?

1-other

Hilfreichster Kommentar

Irgendwelche Updates zu diesem Thema?

Alle 13 Kommentare

@atnsm bro kann ich wissen ob du PDF-annotate in Angular 2+ verwendest?

Das glaub ich nicht. Hier ist die Liste aller Abhängigkeiten:
https://github.com/instructure/pdf-annotate.js/blob/master/package.json

Gleiches Problem, wie kann man das beheben.

Derselbe Fehler wird bei react-pdf-js , bei dem es sich um einen Wrapper um pdfjs-dist handelt.

Mit der neuesten pdfjs-Version (2.0.550) erhalte ich die folgende Fehlermeldung:

Es ist durchaus möglich, dass dieses Problem ein Duplikat von #9456 ist, in diesem Fall wurde es von PR #9853 behoben (das nicht rechtzeitig gelandet ist, um in Version 2.0.550 aufgenommen zu werden).

Das würde ich auch sagen. Lassen Sie uns dies schließen und wir können es jederzeit wieder öffnen, wenn die endgültige Version 2.0 fertig ist und das Problem weiterhin besteht.

Ich stoße auf das gleiche Problem. Hilfe benötigt.

Irgendwelche Updates zu diesem Thema?

Ich habe diese Probleme, wenn ich pdfjs in Winkel 8 verwende. Ich hoffe, ich kann jemandem helfen:

öffentliches ngOnDestroy() {
if (dieses._pdf) {
this._pdf.destroy();
}
if (this.renderTask) {
this.renderTask.cancel();
}
}
In der Renderfunktion sollten Sie das Canvas-Element erhalten durch: this.element.nativeElement.children[0] anstatt mit dem Dom-Dokument abzufragen

Irgendwelche Updates zu diesem Thema?

Ich habe das gleiche Problem, indem ich eine einzelne Leinwand zum Anzeigen der Dokumente verwende und der Benutzer eines von mehreren Dokumenten zum Anzeigen auswählen kann

Ich habe das gleiche Problem, indem ich eine einzelne Leinwand zum Anzeigen der Dokumente verwende und der Benutzer eines von mehreren Dokumenten zum Anzeigen auswählen kann

Sie sollten den Render-PDF-Prozess abbrechen und dann zerstören, bevor Sie eine neue PDF-Datei rendern können

Könnte jemand erklären, wie man dieselbe Seite richtig abbricht und erneut rendert?

Aus anderen Problemen, die ich gesehen habe, sollten Sie nicht dieselbe Leinwand verwenden, um zwei Renderaufgaben gleichzeitig auszuführen. Und Sie müssen entweder warten, bis der vorherige fertig ist (was ich nicht möchte), oder ihn abbrechen.

Das Aufrufen cancel für die vorherige Aufgabe löst jedoch immer noch nicht das Problem, dass manchmal eine Seite auf dem Kopf gerendert wird, was angeblich passiert, wenn Sie zwei Renderaufgaben auf derselben Leinwand ausführen.

Die Lösung von @huannxdev erfordert auch, dass Sie das PDF zerstören. Aber ich möchte es nicht neu laden müssen, nur um eine einzelne Seite neu zu rendern.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen