--- title: "JavaScript PDF viewer tutorial with PDF.js" canonical_url: "https://www.nutrient.io/blog/how-to-build-a-javascript-pdf-viewer-with-pdfjs/" md_url: "https://www.nutrient.io/blog/how-to-build-a-javascript-pdf-viewer-with-pdfjs.md" last_updated: "2026-06-05T20:16:39.898Z" description: "Learn to build a JavaScript PDF viewer with PDF.js, then upgrade to Nutrient Web SDK for annotations, forms, signatures, and real-time collaboration." --- **TL;DR** Build a JavaScript PDF viewer with [PDF.js](https://mozilla.github.io/pdf.js/) for basic rendering, and then upgrade to [Nutrient Web SDK](https://www.nutrient.io/sdk/web/) for production features like annotations, forms, signatures, and collaboration. [Start a free trial](https://www.nutrient.io/try/) or [launch the demo](https://www.nutrient.io/demo/). If you’re building a JavaScript PDF viewer from scratch, start with PDF.js for basic rendering, and then switch to Nutrient Web SDK when you need production features like annotations, forms, signatures, and collaboration. ## Introduction to PDF.js PDF.js is a JavaScript library from Mozilla that renders PDFs directly in the browser. It uses HTML5 and the Canvas API to display documents without plugins. Because it’s open source and actively maintained, many developers use it to add PDF viewing to their web apps. Later in this tutorial, you’ll see how to replace a custom PDF.js viewer with Nutrient Web SDK to get a full-featured, production-ready JavaScript PDF viewer. With PDF.js, you can: - Render PDF files accurately across different browsers. - Integrate PDF viewing capabilities without external plugins or software. - Build both simple and advanced PDF viewers tailored to your application’s needs. ## Requirements Before getting started, make sure you have the following installed: - [Node.js](https://nodejs.org/en/) - A package manager like [npm](https://www.npmjs.com/) (included with Node.js) or [yarn](https://yarnpkg.com/). ## Understanding PDF.js architecture PDF.js operates through three main layers: - **Core** — Interprets the binary format of PDFs and performs heavy parsing operations, often running in a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) to keep the main thread responsive. - **Display** — Builds on the core layer and provides an API for rendering PDF pages into `` elements using JavaScript. - **Viewer** — A ready-to-use interface with features like search, rotation, and a thumbnail sidebar. To use PDF.js, [download a recent copy](https://mozilla.github.io/pdf.js/getting_started/#download) and integrate it into your project. ## Building a basic PDF viewer PDF.js enables rendering of PDFs via AJAX and displaying them in a `` element. Continue reading for a step-by-step guide to setting up a basic viewer. ### Step 1 — Download PDF.js files To render a specific page of a PDF into a `` element, you can use the `display` layer. To get started: 1. Extract all the files in the downloaded copy of PDF.js. 2. Move `pdf.mjs` and `pdf.worker.mjs` from the `build/` folder of the download to a new empty folder. 3. Create an `index.html` file and an `index.js` file. The HTML file needs to point to the `pdf.mjs` source code and to the custom application code (`index.js`). ### Creating the HTML file 1. Create the `canvas` element, which you want to render the PDF inside of: ```html ``` 2. Create a toolbar inside the `
` element to add navigation and zoom controls to the website. Add some icons for the previous (`<`), next (`>`), and zoom buttons. For that, you’ll use the [Font Awesome](https://fontawesome.com/) library; all you need to do is include the CDN link for it. Then add the following code to the `index.html` file: ```html PDF Viewer in JavaScript
``` ### Loading the PDF 1. In your `index.js` file, add the following line to import the `GlobalWorkerOptions` class from the PDF.js library: ```js import { GlobalWorkerOptions } from "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.5.136/build/pdf.min.mjs"; ``` 2. Set the `workerSrc` property on `GlobalWorkerOptions` to point to the worker script. This configuration is essential for PDF.js to operate correctly: ```js GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.5.136/build/pdf.worker.min.mjs"; ``` 3. In your `index.js` file, create a variable to hold the PDF document and use `document.querySelector` to access DOM elements. Additionally, set up an object to maintain the initial state of the application: ```js const pdf = "document.pdf"; const pageNum = document.querySelector("#page_num"); const pageCount = document.querySelector("#page_count"); const currentPage = document.querySelector("#current_page"); const previousPage = document.querySelector("#prev_page"); const nextPage = document.querySelector("#next_page"); const zoomIn = document.querySelector("#zoom_in"); const zoomOut = document.querySelector("#zoom_out"); const initialState = { pdfDoc: null, currentPage: 1, pageCount: 0, zoom: 1, }; ``` Pass the name of your PDF document to the `pdf` variable. 4. Use the `pdfjsLib.getDocument(pdf)` method to load the PDF file, with the `pdf` parameter being the path to the PDF file. Then, use the `.promise.then()` method to handle the promise. The `.then()` method takes a callback function that will be called when the promise is fulfilled. Here, you can access the PDF file and set the `initialState.pdfDoc` to the PDF: ```js // Load the document. pdfjsLib.getDocument(pdf).promise.then((data) => { initialState.pdfDoc = data; console.log("pdfDocument", initialState.pdfDoc); pageCount.textContent = initialState.pdfDoc.numPages; renderPage(); }).catch((err) => { alert(err.message); }); ``` This API makes heavy use of `Promise`, a JavaScript feature for handling future values. If you’re not familiar with this pattern, check out the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). After loading the document, set the text content of the `pageCount` to the number of pages in the document. 5. As you can see, there’s a function called `renderPage()`. Use this function to render the current page of your document: ```js // Render the page. const renderPage = () => { // Load the first page. console.log(initialState.pdfDoc, "pdfDoc"); initialState.pdfDoc.getPage(initialState.currentPage).then((page) => { console.log("page", page); const canvas = document.querySelector("#canvas"); const ctx = canvas.getContext("2d"); const viewport = page.getViewport({ scale: initialState.zoom, }); canvas.height = viewport.height; canvas.width = viewport.width; // Render the PDF page into the canvas context. const renderCtx = { canvasContext: ctx, viewport: viewport, }; page.render(renderCtx); pageNum.textContent = initialState.currentPage; }); }; ``` - Now that the PDF has been initialized, invoke `getPage()` on the document instance. The returned `Promise` resolves with a `page` object you can use to render the first page of your document. - To draw something on the canvas, use the `canvas.getContext()` method. This method returns a context object you can use to draw on the canvas. - The `getViewport(scale)` method returns a viewport object that represents the page at the given scale. - Use the viewport information to set the dimensions of the `` element, and then start the page renderer with the `render(options)` API. - At the end, set the text content of the page number to the current page. This will dynamically update the page number.![PDF.js Demo - Viewing Interface](@/assets/images/blog/2021/how-to-build-a-javascript-pdf-viewer-with-pdfjs/pdfjs-demo.png) ### Navigating through the PDF pages Until now, you’ve only rendered the first page of your PDF document. Now, you’ll work on making the previous and next icons functional when a user clicks them: ```js const showPrevPage = () => { if (initialState.pdfDoc === null || initialState.currentPage <= 1) return; initialState.currentPage--; // Render the current page. currentPage.value = initialState.currentPage; renderPage(); }; const showNextPage = () => { if ( initialState.pdfDoc === null || initialState.currentPage >= initialState.pdfDoc._pdfInfo.numPages ) return; initialState.currentPage++; currentPage.value = initialState.currentPage; renderPage(); }; // Button events. previousPage.addEventListener("click", showPrevPage); nextPage.addEventListener("click", showNextPage); ``` As you can see, the `showPrevPage` and `showNextPage` functions are similar. They both check if the current page is the first or last page, and if it is, they do nothing. Otherwise, they decrement or increment the current page and then render the page. ### Displaying a specific page Here, you can specify which page to render based on a user input. You’re using the `keydown` event to listen for the Enter key — `keypress` is deprecated and behaves inconsistently for non-printable keys, so prefer `keydown` (or `keyup`) and check `event.key === "Enter"`. When the user presses the Enter key, you’ll get the page number from the `currentPage` input and check if it’s between the ranges of PDF pages. If it is, you’ll set the `currentPage` to the desired page and render the page: ```js // Keydown event. currentPage.addEventListener("keydown", (event) => { if (initialState.pdfDoc === null) return; if (event.key === "Enter") { // Get the new page number and render it. let desiredPage = currentPage.valueAsNumber; initialState.currentPage = Math.min( Math.max(desiredPage, 1), initialState.pdfDoc._pdfInfo.numPages, ); currentPage.value = initialState.currentPage; renderPage(); } }); ``` For cases when a user types a number that’s either negative or greater than the number of pages, set the `currentPage` to the first or last page, respectively, and display the page. ### Adding a zoom feature to PDF.js You’re done navigating through the PDF pages. Now, you’ll add the zoom feature: ```js // Zoom events. zoomIn.addEventListener("click", () => { if (initialState.pdfDoc === null) return; initialState.zoom *= 4 / 3; renderPage(); }); zoomOut.addEventListener("click", () => { if (initialState.pdfDoc === null) return; initialState.zoom *= 2 / 3; renderPage(); }); ``` Similar to how it is with navigation, when the user clicks the `zoomIn` or `zoomOut` buttons, you’ll increment or decrement the zoom value and then render the page. ### Serving your website 1. Make sure to copy a PDF file into the folder and rename it to `document.pdf`. 2. Install the `serve` package: ```bash npm install --global serve ``` 3. Serve the contents of the current directory: ```bash serve -l 8080. ``` 4. Navigate to http://localhost:8080 to view the website. ## Embedding the PDF.js viewer in an HTML window While the `display` layer provides fine-grained control over which parts of a PDF document are rendered, there are times when you might prefer a ready-to-use viewer. Luckily, PDF.js has you covered. In this part, you’ll integrate the PDF.js default viewer into the website. 1. Go back to the `pdfjs-dist` folder you downloaded earlier. 2. Copy the entire `web/` folder into a new directory. 3. Create a `build/` folder inside the new directory and copy the `pdf.mjs` and `pdf.worker.mjs` files there. 4. Create an `index.html` file that will include the viewer via an `