Pdf.js: Rückruf, wenn PDF fertig gerendert ist?

Erstellt am 30. Dez. 2014  ·  17Kommentare  ·  Quelle: mozilla/pdf.js

Ich muss einen Farbverlauf rendern, um die untere Hälfte der gerenderten PDF-Datei abzudecken. Ich arbeite für eine Zeitung und wir machen eine App, die die Zeitung mit einem Teaser vor dem Abonnieren zeigt.

Das Problem ist, dass der Farbverlauf auf das PDF gemalt werden muss, also muss es warten, bis das PDF fertig gerendert ist. Tatsächlich führt der Versuch des Verlaufs-Renderings auf mobilen Browsern, bevor das PDF fertig ist, zu einem extrem wilden Verhalten (die Leinwand wird jedes Mal neu gerendert und blinkt, wenn die Seite auch nur ein bisschen gescrollt wird), was zu ständigen Neuzeichnungen führt und der Inhalt auf den Kopf gestellt wird manchmal.

Ich muss also ganz einfach einen Rückruf ausführen, wenn das PDF fertig gerendert ist.

Können Sie Rückrufe unterstützen? Oder ein Ereignis senden, wenn das Rendern abgeschlossen ist?

Hilfreichster Kommentar

Die Verwendung des textlayerrendered -Ereignisses funktioniert für mich:

document.addEventListener('textlayerrendered', function (e) {
  if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
  }
}, true);

Alle 17 Kommentare

Wir haben 'pagerendered' event oder render() Returns Promise. Der generische Viewer rendert niemals alle Seiten, daher kann dies für den Viewer nicht behoben werden, es sei denn, wir führen einen Modus für das PDFViewer-Objekt ein, wenn es alle Seiten rendert.

Ok, also wird ein 'pagerendered'-Ereignis von welchem ​​Objekt ausgelöst? @yurydelendik

Siehe https://github.com/mozilla/pdf.js/blob/master/web/pdf_viewer.js#L225 und Anwendungsbeispiel unter https://github.com/mozilla/pdf.js/blob/master/web /viewer.js#L1733

Bitte beachten Sie, dass wir keine API für Viewer haben. Die einzige API, die wir veröffentlicht haben, ist für das Core- und Canvas-Rendering (siehe src/display/api.js).

@yurydelendik Ich verwende dies mit Canvas im Browser. Ich bin etwas verwirrt darüber, wo sonst PDF JS überhaupt relevant ist. Das hat mich sofort verwirrt, aber wie auch immer, es sieht so aus, als hättest du, wonach ich suche. Vielen Dank!

Schließen wie gelöst.

Ich habe Probleme, dieses Ereignis abzurufen.

Ich lausche (Jquery) auf das Ereignis pagerendered , wie in den obigen Dokumenten gezeigt:

$(document).bind('pagerendered', function (e) {
    console.log('Page rendering complete.');
    //do stuff
});

und rendern Sie das PDF auf Leinwand:

PDFJS.getDocument('my_file.pdf').then(function(pdf) {
    pdf.getPage(1).then(function(page) {
        /* .. snip .. */
        var scaledViewport = page.getViewport(scale);
        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = scaledViewport.height;
        canvas.width = scaledViewport.width;
        var renderContext = {
            canvasContext : context,
            viewport : scaledViewport
        };
        page.render(renderContext);
});

Das Auslösen des Ereignisses selbst funktioniert erfolgreich, sodass mein Listener ordnungsgemäß eingerichtet ist und lange vor dem Aufruf page.render(renderContext) angehängt wird.

Vielleicht habe ich den Auslöser des Ereignisses falsch verstanden. Wann genau sollte das Ereignis pagerendered aus dem Dokument ausgelöst werden?

@yurydelendik

Wenn Sie den generischen Viewer nicht verwenden, wird das Ereignis nicht ausgelöst. Entschuldigung, ich habe nicht verstanden, was Sie fragen.

Unter https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html#L76 erfahren Sie, wie Sie warten, bis das Rendern abgeschlossen ist. jQuery wird hier weniger nützlich sein, versuchen Sie zu lernen, wie man Promises verwendet.

@yurydelendik Ich verstehe jetzt, vielen Dank für deine Zeit!

Die Verwendung des textlayerrendered -Ereignisses funktioniert für mich:

document.addEventListener('textlayerrendered', function (e) {
  if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
  }
}, true);

Mit Ihrem Snippet oben würden Sie einfach Folgendes tun:

page.render(renderContext).then(function() {
  console.log("FINISHED RENDERING!");
}, function() {
  console.log("ERROR");
});

@brendandahl danke)

Danke @lucdetellis ! Ich habe versucht, eine Schaltfläche außerhalb des Viewers die Druckfunktion auszulösen, aber es würde aufgrund des angegebenen Fehlers nie funktionieren. Die Verwendung Ihrer Lösung innerhalb einer Funktion ermöglichte es mir, diese Funktion vom übergeordneten Frame und dann window.focus() und window.print() auszulösen, wenn das Rendern abgeschlossen war, und BAM, das Problem wurde behoben. Ich habe überall nach einer Lösung dafür gesucht :)

document.addEventListener('textlayerrendered', function (e) {
  if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
  }
}, true);

Wird nie nach mir gerufen...

Ich nenne es so (am Ende viewer.js ):

document.addEventListener('textlayerrendered', function (e) {
      console.log("textlayerrendered event called!");
    if (e.detail.pageNumber === PDFViewerApplication.page) {
    // finished rendering
      console.log("FINISHED RENDERING!");
      Android.makeWebViewVisible();
     } else {
     console.log("NOT DONE RENDERING!");
     }
}, true);

document.addEventListener('DOMContentLoaded', webViewerLoad, true);

Bitte verzeihen Sie meine Javascript-Unwissenheit, ich bin ein Android-Entwickler, der versucht, js-Callbacks zu erhalten, wenn die PDF-Datei fertig gerendert wurde, weil ich auf einige Android-spezifische Probleme stoße ... Jede Hilfe wäre sehr willkommen.

Aktualisiert:
Das Problem war, dass die Sichtbarkeit meines Android-Geräts WebView nicht auf VISIBLE gesetzt war, sodass keines der JS-Ereignisse ausgelöst wurde.

Mit dem Viewer, der mit pdf.js bereitgestellt wird, hat das Ereignis pagesloaded für mich funktioniert (ich öffne den Druckdialog, sobald er fertig geladen ist):

document.addEventListener('pagesloaded', function (e) {
    window.print();
}, true);

@turquoise-turtle hast du den event Listener an das Hauptdokument oder an den iframe angehängt, wo du den Viewer hast?

var iframe = document.getElementById('iframe').contentDocument;

                            iframe.addEventListener('pagesloaded', function (e) {
                                alert("loaded");
                            }, true);

Ich mache das und es scheint nicht zu funktionieren

set "eventBusDispatchToDOM": true in viewer.js warum sagt das niemand!

Es scheint, dass die Standardeinstellung geändert wurde, um etwa von August bis September keine Ereignisse an DOM zu senden, wenn man sich #10019 ansieht

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

timvandermeij picture timvandermeij  ·  4Kommentare

PeterNerlich picture PeterNerlich  ·  3Kommentare

aaronshaf picture aaronshaf  ·  3Kommentare

brandonros picture brandonros  ·  3Kommentare

liuzhen2008 picture liuzhen2008  ·  4Kommentare