😅 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
Will be uploading a file, uploaded file will be converted into object URL for us to pass it into the pdfjs library
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 therenderPDFfunction.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
renderPagefunction to render each page.renderPage Function: This function creates a new
PDFPageViewinstance 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 https://mozilla.github.io/pdf.js/web/viewer.html you can dive in further on their web viewer code base to find more.