halting pdf.js पेज प्रतिपादन

Question

मैंने एक साधारण पीडीएफ व्यूअर बनाने के लिए pdf.js का उपयोग किया है जिसमें 2 पृष्ठ एक साथ दूसरे, पिछले बटन और कुछ अन्य सुविधाओं के साथ हैं। मैंने pdf.js repo के साथ उपलब्ध helloworld उदाहरण का उपयोग किया क्योंकि viewer.js फ़ाइल मेरे जैसे नोब के लिए बहुत जटिल थी। हालांकि जब मैं पिछले/अगले बटन पर क्लिक करता हूं तो कई बार pdf.js अपेक्षित अंतिम पृष्ठ की बजाय सभी पृष्ठों को प्रस्तुत करता है। यह एक गड़बड़ बनाता है। Pdf.js द्वारा निम्न उदाहरण एक ही समस्या है। http://jsbin.com/pdfjs-prevnext-v2/1/edit (लिंक केवल फ़ायरफ़ॉक्स में काम करने लगता है।)

मुझे पता है कि क्या pdf.js केवल पिछले अगले/पिछले बटन द्वारा पहुंचा पेज प्रस्तुत करना बनाने के लिए तरीके हैं चाहता हूँ। पीडीएफ.जेएस एपीआई ने मुझे बहुत मदद नहीं की। आशा है कि मुझे यहां कुछ मार्गदर्शन मिलेगा। अग्रिम में धन्यवाद।

Answer 1

यदि मैं आपकी समस्या को अच्छी तरह से समझता हूं, तो मेरे पास समाधान हो सकता है। जब मैंने पिछले या अगले बटन पर बहुत तेजी से क्लिक किया था, तो कैनवास में रीफ्रेश करने का समय नहीं था, और दो (या अधिक) पृष्ठों को खींचा गया था, यह अपठनीय था। मेरी 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. 

(:

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

मैं भी pdf.js फ़ाइल में समारोह प्रस्तुत करना संशोधित किया है:

समस्या को हल करने के लिए, मैं निम्नलिखित कोड का उपयोग , यह लाइन 2563 और 25 9 6 के बीच है)।

नतीजतन, पिछला पृष्ठ पूरी तरह से खींचा जाने तक कोई नया पृष्ठ तैयार नहीं किया जाएगा, भले ही आप पिछले/अगले बटन पर बहुत तेज़ी से क्लिक करें!

एक अन्य समाधान पिछले ड्राइंग रद्द करने के लिए हो सकता है:

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

मुझे आशा है कि यह आप में मदद मिलेगी, और मेरे अंग्रेजी के लिए खेद;) एक अच्छा दिन

Answer 2

दूसरा समाधान के संबंध में

है, आपको फ़ंक्शन के बाहर वेरिएबल timestamp बनाना होगा, उदाहरण के लिए फ़ाइल की शुरुआत में। यदि आप फ़ंक्शन के अंदर timestamp घोषित करते हैं, तो वेरिएबल केवल फ़ंक्शन के निष्पादन के दौरान मौजूद होता है और यह काम नहीं कर सकता है। एस आप निम्न कर सकते हैं:

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

मुझे बताओ अगर यह ठीक है अब

Answer 3

मैं एक ही समस्या है और यह आसान का समाधान। render() विधि देता है एक renderTask वस्तु जो इस तरह दिखेगा:

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

renderTask.internalRenderTask के प्रोटोटाइप cancel() विधि है जो प्रतिपादन को रोक सकते हैं है। तो बस renderTask.internalRenderTask वस्तु याद है और cancel() फोन अगर जरूरत:

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

    // some code here 

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