javascript - Displaying pdf in pdf.js input exact page -


i use pdf.js display pdf documents in spring app.

i'm using 2 buttons navigate in pdf file , display pages. in example jsfiddle/pdfjs/wagvs9lf, looks like:

demo image of app


however want input exact page , display there: exact page display

how can that? if change span markup input markup doesn't work correctly.


this html of fiddle:

<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>  <h1>pdf.js previous/next example</h1>  <div>   <button id="prev">previous</button>   <button id="next">next</button>   &nbsp; &nbsp;   <span>page: <span id="page_num"></span> / <span id="page_count"></span></span> </div>  <canvas id="the-canvas"></canvas> 

small css:

#the-canvas {   border:1px solid black; } 

and code:

// if absolute url remote server provided, configure cors // header on server. var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf';  // workersrc property shall specified. pdfjs.workersrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';  var pdfdoc = null,     pagenum = 1,     pagerendering = false,     pagenumpending = null,     scale = 0.8,     canvas = document.getelementbyid('the-canvas'),     ctx = canvas.getcontext('2d');  /**  * page info document, resize canvas accordingly, , render page.  * @param num page number.  */ function renderpage(num) {   pagerendering = true;   // using promise fetch page   pdfdoc.getpage(num).then(function(page) {     var viewport = page.getviewport(scale);     canvas.height = viewport.height;     canvas.width = viewport.width;      // render pdf page canvas context     var rendercontext = {       canvascontext: ctx,       viewport: viewport     };     var rendertask = page.render(rendercontext);      // wait rendering finish     rendertask.promise.then(function() {       pagerendering = false;       if (pagenumpending !== null) {         // new page rendering pending         renderpage(pagenumpending);         pagenumpending = null;       }     });   });    // update page counters   document.getelementbyid('page_num').textcontent = pagenum; }  /**  * if page rendering in progress, waits until rendering  * finised. otherwise, executes rendering immediately.  */ function queuerenderpage(num) {   if (pagerendering) {     pagenumpending = num;   } else {     renderpage(num);   } }  /**  * displays previous page.  */ function onprevpage() {   if (pagenum <= 1) {     return;   }   pagenum--;   queuerenderpage(pagenum); } document.getelementbyid('prev').addeventlistener('click', onprevpage);  /**  * displays next page.  */ function onnextpage() {   if (pagenum >= pdfdoc.numpages) {     return;   }   pagenum++;   queuerenderpage(pagenum); } document.getelementbyid('next').addeventlistener('click', onnextpage);  /**  * asynchronously downloads pdf.  */ pdfjs.getdocument(url).then(function(pdfdoc_) {   pdfdoc = pdfdoc_;   document.getelementbyid('page_count').textcontent = pdfdoc.numpages;    // initial/first page rendering   renderpage(pagenum); }); 


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -