{"library":"pdfjs-dist-dj","title":"PDF.js Generic Build (v2.x)","description":"PDF.js is an open-source, HTML5-based Portable Document Format (PDF) library developed by Mozilla, designed for parsing and rendering PDF files directly in the browser. The `pdfjs-dist-dj` package provides a generic, pre-built distribution of PDF.js, specifically based on version 2.5.2 of the core library. This version, while functional, is several major versions behind the actively maintained official `pdfjs-dist` package. Its primary purpose is to offer a readily consumable package for integrating PDF viewing capabilities into web applications without requiring a separate build process. Key differentiators include its web-standards-based approach and direct client-side rendering, avoiding server-side processing for basic PDF display. Due to its age, it may lack modern features, performance optimizations, and security updates found in more recent PDF.js releases.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install pdfjs-dist-dj"],"cli":null},"imports":["import * as pdfjsLib from 'pdfjs-dist/build/pdf';","import { GlobalWorkerOptions } from 'pdfjs-dist/build/pdf';","import 'pdfjs-dist/build/pdf.worker.entry';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as pdfjsLib from 'pdfjs-dist/build/pdf';\n// For modern bundlers, importing the worker entry point can automatically configure the worker.\n// If this does not work or for more control, explicitly set pdfjsLib.GlobalWorkerOptions.workerSrc.\nimport 'pdfjs-dist/build/pdf.worker.entry';\n\nasync function renderPdf(pdfUrl: string, canvasId: string) {\n  // For production deployments, ensure `pdf.worker.js` is accessible in your public directory\n  // and set its path here if `pdf.worker.entry` import isn't sufficient.\n  // Example: pdfjsLib.GlobalWorkerOptions.workerSrc = '/static/js/pdf.worker.js';\n\n  try {\n    const loadingTask = pdfjsLib.getDocument(pdfUrl);\n    const pdf = await loadingTask.promise;\n\n    const pageNumber = 1;\n    const page = await pdf.getPage(pageNumber);\n\n    const scale = 1.5;\n    const viewport = page.getViewport({ scale: scale });\n\n    // Prepare canvas using PDF page dimensions\n    const canvas = document.getElementById(canvasId) as HTMLCanvasElement;\n    if (!canvas) {\n      console.error(`Canvas element with ID '${canvasId}' not found. Ensure it exists in your HTML.`);\n      return;\n    }\n    const context = canvas.getContext('2d');\n    if (!context) {\n      console.error(`Could not get 2D rendering context for canvas '${canvasId}'.`);\n      return;\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(`PDF page ${pageNumber} rendered successfully to canvas: ${canvasId}`);\n  } catch (error) {\n    console.error('Error rendering PDF:', error);\n  }\n}\n\n// To run this, add `<canvas id=\"pdf-canvas\"></canvas>` to your HTML body.\n// Replace the example URL with your desired PDF document's URL.\nconst examplePdfUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba24304899580b080f5d54030d321d5c22501d51/web/compressed.tracemonkey-pldi-09.pdf';\nrenderPdf(examplePdfUrl, 'pdf-canvas');\n","lang":"typescript","description":"This code snippet demonstrates how to load a PDF from a URL and render its first page onto a specified HTML canvas element using PDF.js v2.5.2. It includes worker configuration considerations.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}