{"library":"pdfjs-dist-es5","title":"PDF.js ES5 Distribution","description":"pdfjs-dist-es5 is a pre-built, ES5-compatible distribution of Mozilla's PDF.js library, designed for environments that lack support for modern JavaScript features like `async`/`await`, optional chaining, or private class fields. It aims to provide a general-purpose, web standards-based platform for parsing and rendering PDF documents directly in the browser using HTML5. The current stable version is 2.13.216, though the main `pdfjs-dist` package has much more recent releases. This package serves as a specific compatibility layer rather than the bleeding edge, focusing on broader browser support. It differentiates itself by offering a transpiled version of the core PDF.js engine, making it suitable for legacy applications or older browser targets that cannot handle the ES2015+ syntax of the primary `pdfjs-dist` package. Its release cadence is tied to specific compatibility needs, making it less frequent than the main library.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install pdfjs-dist-es5"],"cli":null},"imports":["import * as pdfjsLib from 'pdfjs-dist-es5/build/pdf';","import { GlobalWorkerOptions } from 'pdfjs-dist-es5/build/pdf';\nGlobalWorkerOptions.workerSrc = `//cdn.jsdelivr.net/npm/pdfjs-dist-es5@${pdfjsLib.version}/build/pdf.worker.min.js`;","import { getDocument } from 'pdfjs-dist-es5/build/pdf';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist-es5/build/pdf';\n\n// NOTE: This assumes pdf.worker.min.js is accessible via a CDN or copied to a public path.\n// For optimal performance, it's recommended to host the worker file alongside your app\n// or use a reliable CDN. Replace with the actual worker path if self-hosting.\nGlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.13.216/pdf.worker.min.js`;\n\nconst loadAndRenderPdf = async (url: string, canvasId: string) => {\n  const loadingTask = getDocument(url);\n  const pdfDocument = await loadingTask.promise;\n\n  console.log(`PDF loaded: ${pdfDocument.numPages} pages.`);\n\n  const page = await pdfDocument.getPage(1); // Get the first page\n  const viewport = page.getViewport({ scale: 1.5 });\n\n  const canvas = document.getElementById(canvasId) as HTMLCanvasElement;\n  if (!canvas) {\n    console.error(`Canvas element with ID '${canvasId}' not found.`);\n    return;\n  }\n\n  const context = canvas.getContext('2d');\n  if (!context) {\n    console.error('Failed to get 2D context from canvas.');\n    return;\n  }\n\n  canvas.height = viewport.height;\n  canvas.width = viewport.width;\n\n  const renderContext = {\n    canvasContext: context,\n    viewport: viewport,\n  };\n\n  await page.render(renderContext).promise;\n  console.log('Page rendered to canvas.');\n};\n\n// Example usage (replace with a real PDF URL and a canvas element ID)\nconst pdfUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';\nconst targetCanvasId = 'pdf-render-canvas';\n\n// In a real HTML file, you would have:\n// <canvas id=\"pdf-render-canvas\"></canvas>\n\nif (typeof document !== 'undefined') {\n  // Ensure this runs only in a browser environment\n  document.addEventListener('DOMContentLoaded', () => {\n    const canvasElement = document.createElement('canvas');\n    canvasElement.id = targetCanvasId;\n    document.body.appendChild(canvasElement);\n    loadAndRenderPdf(pdfUrl, targetCanvasId).catch(console.error);\n  });\n}","lang":"typescript","description":"This snippet demonstrates how to load a PDF from a URL and render its first page onto a specified HTML canvas element, setting up the worker correctly.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}