How to Create a Number of PDF Pages Website

Step 1:- Create a page

<div id="WorkPlaceHolder">
        <div id="UploadFile">
          <div class="filedrop" id="filedrop-1">
            <label for="UploadFileInput-1">Choose pdf files</label>
            <label class="filedrop-hint mt-1">or drop pdf files</label>


            <div id="main_container">
              <div class="container">
                <p>Select pdf file to check number of pages and links inside.</>
                <form>
                  <input type=file id=uploader>
                </form>
              </div>
            </div>

            <br><br>
            <div id="pdf_container">
              <button id="number_pdf">
                Count PDF Pages
              </button>
            </div>
          </div>
        </div>
      </div>

 <div class="modal fade" id="pdfInfoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">PDF info</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        </div>
        <div class="modal-body">
          <p>Pages: <span class="pdf-pages">in progress</span></p>
          <p>Links: <span class="pdf-links">in progress</span></p>
        </div>
      </div>
    </div>
  </div>

Step 2:- write a javascript code

<script src="https://frontenddeveloping.github.io/pdfjs-dist/build/pdf.js"></script>
  <script src="https://frontenddeveloping.github.io/pdfjs-dist/build/pdf.worker.js"></script>
<script id="jsbin-javascript">
    function processAnnotations(annotationsData) {
      for (var i = 0; i < annotationsData.length; i++) {
        var data = annotationsData[i];
        if (!data) {
          continue;
        }
        if (data.subtype === 'Link') {
          linkCounter++;
        }
      }
    }

    function readPDFFile(pdf) {
      PDFJS.getDocument({
        data: pdf
      }).then(function(pdf) {
        $pdfPages.text(pdf.pdfInfo.numPages);
        var pagesPromisesArray = new Array(pdf.pdfInfo.numPages + 1).join('0').split('').map(function(value, index) {
          return pdf.getPage(++index);
        });

        Promise.all(pagesPromisesArray).then(function(pages) {
          var pagesAnnotationsPromisesArray = pages.map(function(page) {
            return page.getAnnotations();
          });
          Promise.all(pagesAnnotationsPromisesArray).then(function(annotationsDataArray) {
            annotationsDataArray.forEach(function(pageAnnotationsData) {
              processAnnotations(pageAnnotationsData);
            });
            $pdfLinks.text(linkCounter);
            $('#pdfInfoModal').modal('show'); // Open the modal here
          });
        });
      });
    }

    var linkCounter;
    var $pdfPages = $('.pdf-pages');
    var $pdfLinks = $('.pdf-links');

    $('#number_pdf').click(function() {
      var fileInput = document.getElementById('uploader');
      var file = fileInput.files[0];
      linkCounter = 0;

      if (!file) {
        return;
      }

      var fileReader = new FileReader();
      fileReader.onload = function(e) {
        readPDFFile(new Uint8Array(e.target.result));
      };
      fileReader.readAsArrayBuffer(file);
    });
  </script>

Output:- Select a PDF file and click on the button

Add your CSS, I give you only html and javascript code…. Happy Coding !!!!!