<script src="./build/pdf.js"></script>
<script src="./text_layer/text_layer_builder.js"></script>
<link type="text/css" href="./text_layer/text_layer_builder.css" rel="stylesheet">
<script>
     PDFJS.workerSrc = "./build/pdf.worker.js";
</script>

<!-- www pdf file -->
<div style='padding-top:10px; padding-left:20px;'>
     <font color='#303030'><b>PDF file</b></font>
     <input type='text' size='80' id='textElement' value='https://dir.by/developer/js/pdf_readers/example2/test.pdf'>
</div>

<!-- scale -->
<div style='padding-top:15px; padding-left:20px;'>
     <font color='#303030'><b>Scale</b></font>
     <input type='text' size='5' id='scaleElement' value='0.9'>
</div>

<!-- button to download the file PDF -->
<div style='padding-top:15px; padding-left:20px;'>
     <input type='button' value='Reload PDF' onClick='onClickButton();' style='color:green; font-weight:600;'>
</div>

<!-- file contents PDF -->
<div id="containerForPDF" tabindex="0" style='padding-top:20px; padding-left:20px; height:400px; overflow:scroll;'>
</div>

<script>
     function onClickButton()
     {
          url = document.getElementById('textElement').value;
          var scale = document.getElementById('scaleElement').value;
          loadPDFinDIV(url, 'containerForPDF', scale);
     }

     function loadPDFinDIV(urlPDF, idDIV, scale)
     {
          PDFJS.getDocument(urlPDF).promise.then(function(pdf)
          {
               console.log('PDF loaded');

               // Get div#container and cache it for later use
               var container = document.getElementById(idDIV);
               container.innerHTML = "";
    
               // Loop from 1 to total_number_of_pages in PDF document
               for (var i = 1; i <= pdf.numPages; i++)
               {
                    // Get desired page
                    pdf.getPage(i).then(function(page)
                    {
                         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
                         div.setAttribute("style", "position:relative; background-color:gray; padding-top:10px; padding-left:20px;");
                         div.style.width = viewport.width + 20 + "px";
    
                         // Append div within div#container
                         container.appendChild(div);
    
                         // Create a new Canvas element
                         var canvas = document.createElement("canvas");
    
                         // Append Canvas within div#page-#{pdf_page_number}
                         div.appendChild(canvas);
    
                         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();
                         });
    
                    });
               }
          },
          function (reason)
          {
               // PDF loading error
               console.error(reason);
          });
     }

     onClickButton();
</script>