pdf_quantities.html

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/extension.js"></script>
<script src="js/resource/config.js"></script>


<link rel="stylesheet" href="css/annotations.css"/>

<link type="text/css" href="lib/pdf.js/web/text_layer_builder.css" rel="stylesheet"/>
<link type="text/css" href="lib/pdf.js/web/annotation_layer_builder.css" rel="stylesheet"/>
<script type="text/javascript" src="lib/pdf.js/web/text_layer_builder.js"></script>
<script type="text/javascript" src="lib/pdf.js/web/pdf_link_service.js"></script>
<script type="text/javascript" src="lib/pdf.js/web/annotation_layer_builder.js"></script>
<script type="text/javascript" src="lib/pdf.js/build/pdf.js"></script>
<script type="text/javascript" src="lib/pdf.js/build/pdf.js"></script>
<script type="text/javascript" src="js/quantities.js"></script>

<!-- <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 id="container">


</div>

<script type="text/javascript">

PDFJS.disableWorker = true;
measurementMap = new Array();

var docid = $.getUrlVars("anhalyticsDocId").anhalyticsDocId;
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var pdfurl = defaults.anhalytics_rest+'?id='+docid;
var annotationurl = defaults.es_host+"/"+defaults.quantities_annotation_index+"/"+defaults.quantities_annotation_type+"/"+docid;

PDFJS.getDocument(pdfurl).then(function (pdf) {
    // Get div#container and cache it for later use
    var container = document.getElementById("container");
    // enable hyperlinks within PDF files.
    //var pdfLinkService = new PDFJS.PDFLinkService();
    //pdfLinkService.setDocument(pdf, null);

    //$('#requestResult').html('');
    nbPages = pdf.numPages;

    // Loop from 1 to total_number_of_pages in PDF document
    for (var i = 1; i <= nbPages; i++) {

        // Get desired page
        pdf.getPage(i).then(function (page) {
            var table = document.createElement("table");
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");

            tr.appendChild(td1);
            tr.appendChild(td2);
            table.appendChild(tr);

            var div0 = document.createElement("div");
            div0.setAttribute("style", "text-align: center; margin-top: 1cm; width:80%;");
            var pageInfo = document.createElement("p");
            var t = document.createTextNode("page " + (page.pageIndex + 1) + "/" + (nbPages));
            pageInfo.appendChild(t);
            div0.appendChild(pageInfo);

            td1.appendChild(div0);

            var scale = 1.5;
            var viewport = page.getViewport(scale);
            var div = document.createElement("div");

            // Set id attribute with page-#{pdf_page_number} format
            div.setAttribute("id", "page-" + (page.pageIndex + 1));

            // This will keep positions of child elements as per our needs, and add a light border
            div.setAttribute("style", "position: relative; ");


            // Create a new Canvas element
            var canvas = document.createElement("canvas");
            canvas.setAttribute("style", "border-style: solid; border-width: 1px; border-color: gray;");

            // Append Canvas within div#page-#{pdf_page_number}
            div.appendChild(canvas);

            // Append div within div#container
            td1.appendChild(div);

            var annot = document.createElement("div");
            annot.setAttribute('style', 'vertical-align:top;');
            annot.setAttribute('id', 'detailed_quantity-' + (page.pageIndex+1));
            td2.setAttribute('style', 'vertical-align:top;');
            td2.appendChild(annot);

            container.appendChild(table);

            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };

            // Render PDF page
            page.render(renderContext).then(function () {
                // Get text-fragments
                return page.getTextContent();
            })
                .then(function (textContent) {
                    // Create div which will hold text-fragments
                    var textLayerDiv = document.createElement("div");

                    // Set it's class to textLayer which have required CSS styles
                    textLayerDiv.setAttribute("class", "textLayer");

                    // Append newly created div in `div#page-#{pdf_page_number}`
                    div.appendChild(textLayerDiv);

                    // Create new instance of TextLayerBuilder class
                    var textLayer = new TextLayerBuilder({
                        textLayerDiv: textLayerDiv,
                        pageIndex: page.pageIndex,
                        viewport: viewport
                    });

                    // Set text-fragments
                    textLayer.setTextContent(textContent);

                    // Render text-fragments
                    textLayer.render();

                    var xhr = new XMLHttpRequest();
                    xhr.responseType = 'json';

                    xhr.open('GET', annotationurl, true);
                    xhr.onreadystatechange = function (e) {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                      var response = e.target.response;
                      //var response = JSON.parse(xhr.responseText);
                      //console.log(response);
                      setupAnnotations(response);
                    } else if (xhr.status != 200) {
                      console.log("Response " + xhr.status + ": ");
                    }
                  };
                  xhr.send();
                });
        });
    }
});
</script>