Stop pdf.js page output

Question

I used pdf.js to create a simple PDF viewer that has 2 pages side by side with the next, previous buttons and some other features. I used the helloworld example, available with the pdf.js repository, since the viewer.js file was too complex for a noob like me. However, when I click the previous / next button several times, the pdf.js file displays all pages instead of the expected last page. This creates a mess. The following pdf.js example has the same problem. http://jsbin.com/pdfjs-prevnext-v2/1/edit (the link seems to work only in firefox.)

I want to know what ways to make pdf.js display only the last page obtained using the next / previous buttons. pdf.js api didn't help me much. Hope I get some tips here. Thank you in advance.

Answer 1

If I understand your problem well, I may have a solution. When I clicked too quickly on the buttons of the previous or next, there was no time for updating on the canvas, and the two (or more) pages on which it was drawn were unreadable.

To solve the problem, I use the following 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); } } 

I also changed the rendering function in the pdf.js file:

  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 my pdf.js file, this is between lines 2563 and 2596).

As a result, a new page will not be drawn until the previous page is completely drawn, even if you click very quickly on the previous / next buttons!

Another solution might be to undo the previous picture:

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

I hope this helps you and sorry for my English;) Have a nice day

Answer 2

I have the same problem and solve it easier. The render() method returns a renderTask object that looks like this:

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

The renderTask.internalRenderTask prototype has a cancel() method that can stop rendering. So just remember the renderTask.internalRenderTask object and call cancel() if necessary:

 render: function() { if (this.renderTask) { this.renderTask.cancel(); } // some code here this.renderTask = page.render(...).internalRenderTask; } 

Answer 3

As for the second solution, you need to create the timestamp variable outside the function, for example, at the beginning of the file. If you declare a timestamp inside a function, the variable exists only during the execution of the function and cannot work. S you can do the following:

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

Tell me is it good now