anhalten pdf.js Seite-rendering

Habe ich verwendet pdf.js erstellen einer einfachen pdf-viewer, der hat 2 Seiten nebeneinander mit weiter,zurück-buttons und einige andere features. Verwendet habe ich das helloworld-Beispiel mit der pdf.js repo als viewer.js Datei war zu kompliziert für einen noob wie mich. Allerdings, wenn ich auf der vorherigen/nächsten Taste mehrmals pdf.js rendert alle Seiten statt des erwarteten letzten Seite. Es schafft ein Chaos. Das folgende Beispiel von pdf.js habe das gleiche problem.
http://jsbin.com/pdfjs-prevnext-v2/1/edit (link scheint zu funktionieren, im firefox nur.)

Ich will wissen, was sind die Möglichkeiten, Sie zu machen pdf.js render wird nur die Letzte Seite erreicht für die nächsten/vorherigen Tasten. pdf.js api hat mir nicht geholfen viel. Hoffe, dass ich einige Anleitungen hier. Vielen Dank im Voraus.

InformationsquelleAutor sss | 2013-08-05
  1. 4

    Wenn ich verstehe gut dein problem, ich könnte eine Lösung haben.
    Wenn ich klickte zu schnell auf den Tasten previous oder next, die Leinwand hatte nicht die Zeit zu aktualisieren, und zwei (oder mehr) Seiten, auf denen gezeichnet, es war nicht lesbar.

    Das problem zu lösen, ich verwende den folgenden code :

    var stop = false;
function goPrevious() {
    if (pageNum > 1 && !stop)
    {
        stop = true;
        pageNum--;
        renderPage(pageNum);
    }
}

function goNext() {
    if (pageNum < pdfDoc.numPages && !stop)
    {
        stop = true;
        pageNum++;
        renderPage(pageNum);
    }
}

    Habe ich auch geändert die render-Funktion in der pdf.js Datei :

     render: function PDFPageProxy_render(params) {
      this.renderInProgress = true;

      var promise = new Promise();
      var stats = this.stats;
      stats.time('Overall');
      //If there is no displayReadyPromise yet, then the operatorList was never
      //requested before. Make the request and create the promise.
      if (!this.displayReadyPromise) {
        this.displayReadyPromise = new Promise();
        this.destroyed = false;

        this.stats.time('Page Request');
        this.transport.messageHandler.send('RenderPageRequest', {
          pageIndex: this.pageNumber - 1
        });
      }

      var self = this;
      function complete(error) {
        self.renderInProgress = false;
        stop = false;
        if (self.destroyed || self.cleanupAfterRender) {
          delete self.displayReadyPromise;
          delete self.operatorList;
          self.objs.clear();
        }

        if (error)
          promise.reject(error);
        else
          promise.resolve();
      }
      var continueCallback = params.continueCallback;
//etc.

    (in meinem pdf.js Datei, diese ist zwischen den Zeilen 2563 und 2596).

    Als ein Ergebnis, keine neue Seite, die gezogen werden, bis die Vorherige Seite war komplett angezogen, auch wenn Sie auf sehr sehr schnell auf den vorherigen/nächsten Tasten !

    Eine andere Lösung könnte sein, die Abbrechen die Vorherige Zeichnung :

    function renderPage(num) {


pdfDoc.getPage(num).then(function(page) {

        //canvas resize
        viewport = page.getViewport(ratio);
        canvas.height = viewport.height;
        canvas.width = viewport.width;


        //draw the page into the canvas
        var pageTimestamp = new Date().getTime();
        timestamp = pageTimestamp;
        var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                continueCallback: function(cont) {
                    if(timestamp != pageTimestamp) {
                        return;
                    }
                    cont();
                }
        };
        page.render(renderContext);


        //update page numbers
        document.getElementById('page_num').textContent = pageNum;
        document.getElementById('page_count').textContent = pdfDoc.numPages;
    });
}

    Ich hoffe, es wird dir helfen, und sorry für mein Englisch 😉
    Habt einen schönen Tag

    • Ich habe versucht, und es schien besser zu funktionieren als vorher, allerdings habe ich noch mit der Frage konfrontiert, beim klicken zu schnell.Ich weiß nicht, ob Sie zugewandt sind es auch. Ich wünschte, ich könnte die Schaltflächen deaktivieren, bis die Leinwand war voll geladen, ich habe versucht, mit Fenster.onload(), hat aber nicht funktioniert als Leinwand nehmen mehr Zeit zum laden. Die komplette viewer.html durch pdf.js hat das Halteproblem Funktionalität, nicht herausfinden können, wie Sie es getan haben, obwohl.
    • Ich habe nur versucht deine 1. Lösung, lassen Sie mich überprüfen Sie heraus den 2. Vielen Dank für Ihre Mühe und Ihr Englisch ist toll. 🙂
    • Ich habe versucht, Aufhebung der bisherigen Zeichnung, jedoch timestamp = pageTimestamp; gab einen Fehler timestamp wird nicht definiert, also habe ich code var timestamp = pageTimestamp; und jetzt, es wird nie innerhalb der if(Zeitmarke != pageTimestamp) Zustand, da Sie immer gleich. Was mache ich falsch ? Nochmals vielen Dank im Voraus. 🙂
    • Betreffend die erste Lösung, auch wenn ich Sie sehr sehr schnell, es ist ok und nur eine Seite gezogen wird.
    InformationsquelleAutor Elodie
  2. 6

    Ich habe das gleiche problem und lösen es einfacher.
    Die render() Methode gibt eine renderTask Objekt, das wie folgt Aussehen:

    renderTask: {
    internarRenedrTask: {...},
    promise: {...}
}

    Den Prototyp renderTask.internalRenderTask hat cancel() Methode, die können halt Rendern.
    So nur daran erinnern renderTask.internalRenderTask - Objekt, und rufen cancel() wenn nötig:

    render: function() {
    if (this.renderTask) {
        this.renderTask.cancel();
    }

    //some code here

    this.renderTask = page.render(...).internalRenderTask;
}
    • 2015: page.render(...) ist nun die Rückkehr einer renderTask hat cancel Methode. --> this.renderTask = page.render(...);.
    • könnten Sie mehr info auf, wie Sie Zugang zu dieser Methode, bitte? Oder ist es immer noch relevant in 2019?
    • es ist immer noch verfügbar. mozilla.github.io/pdf.js/api/draft/RenderTask.html.
    • werfen Sie einen Blick auf die Beispiele, sehen Sie page.render(..) und wie Sie auf die renderTask.
    InformationsquelleAutor Genovich
  3. 0

    Bezüglich der zweiten Lösung, die Sie haben, um die variable zu erstellen timestamp außerhalb der Funktion, zum Beispiel am Anfang der Datei. Wenn Sie erklären timestamp innerhalb der Funktion, die variable existiert nur während der Ausführung der Funktion wird und kann nicht funktionieren. S können Sie Folgendes tun :

    var timestamp;
function renderPage(num) {


pdfDoc.getPage(num).then(function(page) {

        //canvas resize
        viewport = page.getViewport(ratio);
        canvas.height = viewport.height;
        canvas.width = viewport.width;


        //draw the page into the canvas
        var pageTimestamp = new Date().getTime();
        timestamp = pageTimestamp;
        var renderContext = {
                canvasContext: ctx,
                viewport: viewport,
                continueCallback: function(cont) {
                    if(timestamp != pageTimestamp) {
                        return;
                    }
                    cont();
                }
        };
        page.render(renderContext);


        //update page numbers
        document.getElementById('page_num').textContent = pageNum;
        document.getElementById('page_count').textContent = pdfDoc.numPages;
    });
}

    Mir sagen, ob es ok ist, jetzt

    • Vielen Dank, das funktioniert wie ein Charme. Sie sind ein Lebensretter. Es zu schätzen wissen. 🙂
    InformationsquelleAutor Elodie
Schreibe einen Kommentar