Simple PDF viewer using pdfjs-dist

Simple PDF viewer using pdfjs-dist

😅 Disclaimer: Currently i'm playing around this library for one of the project which I'm working one, so sharing the progress & learning for my future reference.

It's a library from Mozilla, will be using reactJS for this.

As for this post this will a bare minimal where you can upload a file which will be rendered in the webpage.

You can find the working demo in the below StackBlitz Preview. Upload a PDF file to preview it. Project Link

  1. Will be uploading a file, uploaded file will be converted into object URL for us to pass it into the pdfjs library

  2. loadPDF Function: This function is responsible for loading the PDF file using the PDF.js library. It first checks if there is an existing PDF document proxy and destroys it if present. Then, it calculates the container's dimensions and fetches the PDF document using pdfjsLib.getDocument(). Once the document is loaded, it calls the renderPDF function.

  3. renderPDF Function: This function iterates through each page of the PDF document and renders it on the screen. For each page, it calculates the scale factor based on the container's dimensions and the page's dimensions. It then calls the renderPage function to render each page.

  4. renderPage Function: This function creates a new PDFPageView instance for rendering a single page of the PDF document. It configures the page view with the necessary options, such as the container element, page ID, scale factor, viewport, event bus, and annotation mode. Finally, it draws the page on the screen.

As article title describe it just simple viewer, but this have far more potential which you can dive further on their online example which can be found here you can dive in further on their web viewer code base to find more.