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 !!!!!

Related Posts

Ask a Doctor Online: A Simple Guide to Virtual Healthcare

In our fast-paced world, the traditional trip to a doctor’s office isn’t always the most practical first step when health concerns arise. Whether you are dealing with…

Read More

Best Free Programming Ebooks to Learn Software Development

Learning modern technology can feel overwhelming when tutorials are scattered across dozens of websites. Many software developers, engineering students, and IT professionals struggle to find comprehensive study…

Read More

FinOps Training: Understanding Cost Visibility and Optimization

Introduction Moving workloads to the cloud can simplify infrastructure management, but it can also introduce a new financial challenge. Teams can provision resources whenever they need them,…

Read More

The Architecture of Intelligent DataOps: From Ingestion to Automation

Introduction Modern organizations run on distributed data ecosystems. On any given day, an enterprise environment ingests, transforms, and serves petabytes of records sourced from transactional databases, external…

Read More

Transforming Data Reliability: How DataOps Platforms Drive Proactive Monitoring

Introduction Traditional monitoring focuses almost entirely on infrastructure availability and binary job execution states—whether a server is up or whether a task completed. However, modern distributed environments…

Read More

Navigating Pipeline Risks with Expert DevSecOps Consulting Services

Software delivery moves faster today than at any point in technological history. High-performing engineering organizations push code changes to production multiple times a day using automated deployment…

Read More
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x