interruzione del rendering della pagina pdf.js

Question

Ho usato pdf.js per creare un semplice visualizzatore di file PDF che ha 2 pagine affiancate con i pulsanti successivi, precedenti e alcune altre funzionalità. Ho usato l'esempio di helloworld disponibile con il repository pdf.js perché il file viewer.js era troppo complicato per un noob come me. Tuttavia quando faccio clic sul pulsante precedente/successivo più volte pdf.js esegue il rendering di tutte le pagine anziché dell'ultima pagina prevista. Crea un casino. Il seguente esempio di pdf.js ha lo stesso problema. http://jsbin.com/pdfjs-prevnext-v2/1/edit (il collegamento sembra funzionare solo in firefox.)

Desidero sapere quali sono i modi per rendere pdf.js il rendering solo dell'ultima pagina raggiunta dai pulsanti successivo/precedente. pdf.js api non mi ha aiutato molto. Spero di avere una guida qui. Grazie in anticipo.

Answer 1

Se capisco bene il problema, potrei avere una soluzione. Quando ho cliccato troppo velocemente sui pulsanti precedente o successivo, la tela non aveva il tempo di aggiornare e due (o più) pagine disegnate, era illeggibile.

per risolvere il problema, io uso il seguente codice:

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

Ho modificato anche la funzione di rendering nel file pdf.js:

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. 

(nel mio file pdf.js , questo è tra le righe 2563 e 2596).

Come risultato, non verrà disegnata nessuna nuova pagina fino a quando la pagina precedente non è stata interamente disegnata, anche se si fa clic molto velocemente sui pulsanti precedente/successivo!

Un'altra soluzione potrebbe essere quella di annullare il disegno precedente:

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

Spero che vi aiuterà, e mi dispiace per il mio inglese;) have a nice day

Answer 2

Per quanto riguarda la seconda soluzione, devi creare la variabile timestamp al di fuori della funzione, ad esempio all'inizio del file. Se si dichiara timestamp all'interno della funzione, la variabile esiste solo durante l'esecuzione della funzione e non può funzionare. S è possibile effettuare le seguenti operazioni:

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

Dimmi se è ok ora

Answer 3

Ho lo stesso problema e risolverlo più facile. Il metodo restituisce un oggetto render()renderTask che simile a questa:

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

Il prototipo di renderTask.internalRenderTask ha cancel() metodo che può fermare il rendering. Quindi, basta ricordare renderTask.internalRenderTask oggetto e chiamare cancel() se necessario:

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

    // some code here 

    this.renderTask = page.render(...).internalRenderTask; 
}