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:
however want input exact page , display there:
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> <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
Post a Comment