Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<body>
  <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>
​
  <div>
    <canvas id="the-canvas" style="border:1px solid black"></canvas>
  </div>
  
  <div>
    <form id="fieldsForm">
        Choose field:
        <select id="selectField" onchange="eval(this.value);">
        </select>
    </form>
  </div>
​
  <!-- Use latest PDF.js build from Github -->
  <script src="http://mozilla.github.io/pdf.js/build/pdf.js"></script>
  
  <script>
    var path = 'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf';
​
    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        pageLeftPending = 0,
        pageTopPending = 0,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d'),
        pdfPageWidth = 0,
        pdfPageHeight = 0,
        pdfRotate = 0;
    
    function removeOptions(selectbox){
        var i;
        for(i=selectbox.options.length-1;i>=0;i--){
            selectbox.remove(i);
        }
    }
​
    function addSelectBoxForPageAcroFieldsToForm(page) {
        page.getAnnotations().then(
                function(items) {
                    var selectField = document.getElementById("selectField");
                    removeOptions(selectField);
                    var optionsHTML = [];
                    if (items.length == 0){
                        optionsHTML.push("<option value=\"console.log('no fields clicked - doing nothing');\">No fields</option>");
                    }
                    for ( var i = 0; i < items.length; i++) {
                        var item = items[i];
                        switch (item.subtype) {
                            case 'Widget':
                                if (item.fieldType != 'Tx' && item.fieldType != 'Btn' && item.fieldType != 'Ch') {
                                    break;
                                }
                                var fieldName;
                                if (item.fieldType == 'Tx') {
                                    fieldName = 'Inputfield with key ' + item.fullName + ' (position: ' + item.rect + ')';
                                }
                                if (item.fieldType == 'Btn') {
                                    if (item.flags & 32768) {
                                        fieldName = 'Radiobutton with key ' + item.fullName + ' (position: ' + item.rect + ')';
                                    } else if (item.flags & 65536) {
                                        fieldName = 'Pushbutton with key ' + item.fullName + ' (position: ' + item.rect + ')';
                                    } else {
                                        fieldName = 'Checkbox with key ' + item.fullName + ' (position: ' + item.rect + ')';
                                    }
                                }
                                if (item.fieldType == 'Ch') {
                                    fieldName = 'Selectbox with key ' + item.fullName + ' (position: ' + item.rect + ')';
                                }
                                
                                x = item.rect[0];
                                if (pdfRotate == 90){
                                    y = pdfPageWidth - item.rect[1];
                                }
                                else if (pdfRotate == 0){
                                    y = pdfPageHeight - item.rect[1];
                                }
                                else {
                                    //TODO: other rotates
                                }
                                optionsHTML.push("<option value=\"queueRenderPage("+pageNum+","+x+","+y+");\">"+fieldName+"</option>");
                        }
                    }
                    selectField.innerHTML = optionsHTML.join('\n');
                });
    }
    
    function renderPage(pageNum, xOffset, yOffset, renderAcroFieldSelect) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(pageNum).then(function(page) {
            var pdfViewBox = page.pageInfo.view;
            pdfPageWidth = pdfViewBox[2];
            pdfPageHeight = pdfViewBox[3];
            pdfRotate = page.rotate;
    
            var viewport = new PDFJS.PageViewport(pdfViewBox, 1, page.rotate, -xOffset, -yOffset);
    
            // Render PDF page into canvas context
            var renderContext = {
                canvasContext : ctx,
                viewport : viewport
            };
            var renderTask = page.render(renderContext);
    
            // Wait for rendering to finish
            renderTask.promise.then(function() {
                if (renderAcroFieldSelect){
                    addSelectBoxForPageAcroFieldsToForm(page);
                }
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending, pageLeftPending, pageTopPending);
                    pageNumPending = null;
                    pageLeftPending = 0;
                    pageTopPending = 0;
                }
            });
    
            // Update page counters
          document.getElementById('page_num').textContent = pageNum;
        });
    }
    
    /**
     * If another page rendering in progress, waits until the rendering is
     * finised. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num, xOffset, yOffset) {
      if (pageRendering) {
        pageNumPending = num;
        pageLeftPending = xOffset;
        pageTopPending = yOffset;
      } else {
        renderPage(num, xOffset, yOffset, false);
      }
    }
​
    /**
     * Displays previous page.
     */
    function onPrevPage() {
      if (pageNum <= 1) {
        return;
      }
      pageNum--;
      queueRenderPage(pageNum,0,0,true);
    }
    document.getElementById('prev').addEventListener('click', onPrevPage);
​
    /**
     * Displays next page.
     */
    function onNextPage() {
      if (pageNum >= pdfDoc.numPages) {
        return;
      }
      pageNum++;
      queueRenderPage(pageNum,0,0,true);
    }
    document.getElementById('next').addEventListener('click', onNextPage);
​
    /**
     * Asynchronously downloads PDF.
     */
    PDFJS.getDocument(path).then(function (pdfDoc_) {
      pdfDoc = pdfDoc_;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
​
      // Initial/first page rendering
      renderPage(pageNum,0,0,true);
    });
  </script>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
IntegratingStuffpro
0viewers