{"library":"pdfjs-dist","title":"Mozilla PDF.js Distribution","description":"pdfjs-dist is the generic pre-built distribution of Mozilla's PDF.js library, a powerful HTML5-based Portable Document Format (PDF) library designed for parsing and rendering PDFs directly in web browsers. It aims to provide a general-purpose, web standards-based platform for PDF handling. The current stable version is 5.6.205 (as of April 2026), with frequent patch and minor releases, typically on a monthly or bi-monthly cadence, containing improvements for accessibility, performance, annotation editing, and viewer functionalities. Its key differentiators include being an official Mozilla project, its robust support for various PDF features (like annotations, forms, and accessibility), and its ability to operate entirely client-side, making it a popular choice for in-browser PDF display and manipulation without requiring server-side rendering capabilities.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install pdfjs-dist"],"cli":null},"imports":["import * as pdfjsLib from 'pdfjs-dist';","import { getDocument } from 'pdfjs-dist';","import { GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';","pdfjsLib.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.js`;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as pdfjsLib from 'pdfjs-dist';\n\n// IMPORTANT: Configure the worker source. This path must be publicly accessible.\n// Using unpkg or similar CDN is common for browser environments.\npdfjsLib.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.js`;\n\n// For Node.js environments, depending on your setup, you might need a different approach.\n// For example, using `require.resolve` if bundling for Node.js:\n// pdfjsLib.GlobalWorkerOptions.workerSrc = require.resolve('pdfjs-dist/build/pdf.worker.min.js');\n\nasync function loadAndRenderPdf(pdfUrl: string, containerId: string = 'pdf-viewer') {\n const container = document.getElementById(containerId);\n if (!container) {\n console.error(`Container with ID '${containerId}' not found.`);\n return;\n }\n container.innerHTML = ''; // Clear previous content\n\n try {\n const loadingTask = pdfjsLib.getDocument(pdfUrl);\n const pdfDocument = await loadingTask.promise;\n\n console.log(`PDF loaded: ${pdfDocument.numPages} pages`);\n\n for (let i = 1; i <= pdfDocument.numPages; i++) {\n const page = await pdfDocument.getPage(i);\n const scale = 1.5; // Adjust scale as needed for rendering quality\n const viewport = page.getViewport({ scale });\n\n const canvas = document.createElement('canvas');\n const context = canvas.getContext('2d');\n if (!context) {\n throw new Error('Could not get canvas 2D rendering context');\n }\n\n canvas.height = viewport.height;\n canvas.width = viewport.width;\n canvas.style.display = 'block';\n canvas.style.margin = '10px auto';\n canvas.style.border = '1px solid #ccc';\n\n container.appendChild(canvas);\n\n const renderContext = {\n canvasContext: context,\n viewport: viewport,\n };\n await page.render(renderContext).promise;\n console.log(`Page ${i} rendered to canvas.`);\n }\n\n } catch (error) {\n console.error('Error loading or rendering PDF:', error);\n container.innerHTML = `
`;\n }\n}\n\n// To run this code, you'll need an HTML file like:\n// \n// \n// PDF.js Quickstart\n// \n// \n// Ensure 'your-script.js' is the compiled output of this TypeScript.\nloadAndRenderPdf('https://raw.githubusercontent.com/mozilla/pdf.js/ba2ddd075de5c0529d8e788c86a1118129202521/web/compressed.tracemonkey-pldi-09.pdf', 'pdf-viewer');\n","lang":"typescript","description":"Demonstrates how to load a PDF from a URL, configure the necessary worker script, and render each page of the PDF onto individual HTML canvas elements within a specified container in a browser environment.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}