PDF.js Library (Legacy `pdfjs-lib` package)

0.0.149 · abandoned · verified Sun Apr 19

PDF.js is a Portable Document Format (PDF) library built with HTML5, aiming to create a general-purpose, web standards-based platform for parsing and rendering PDFs. The package `pdfjs-lib` with version `0.0.149` (as provided) refers to a very old and effectively abandoned build of the PDF.js library. Its last known publish was over three years ago. The actively maintained and widely used package for consuming Mozilla's PDF.js library is `pdfjs-dist`. The current stable version of `pdfjs-dist` is around `5.6.205`, with a healthy and positive release cadence, often seeing multiple new versions within a few months, and continuous community interaction. Key differentiators include its robust HTML5-based rendering capabilities, cross-browser compatibility, and its role as the underlying technology for Firefox's built-in PDF viewer. It supports rendering PDFs onto HTML5 `<canvas>` elements, including a selectable text layer for search and copy-paste. While `pdfjs-lib` (0.0.149) may still exist on npm, it should be considered deprecated and developers are strongly advised to use `pdfjs-dist` for any new or existing projects.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to load a PDF from a URL and render its first page onto an HTML canvas using the modern `pdfjs-dist` package, including the critical Web Worker setup for optimal performance.

import * as pdfjsLib from 'pdfjs-dist/build/pdf';

// Set the workerSrc to enable PDF.js to load the worker script.
// This is crucial for performance and preventing UI freezes.
// For production, consider serving pdf.worker.min.mjs from a CDN or your static assets.
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;

async function renderPdfToCanvas(pdfUrl, canvasId) {
  const canvas = document.getElementById(canvasId);
  if (!canvas) {
    console.error(`Canvas element with ID '${canvasId}' not found.`);
    return;
  }
  const context = canvas.getContext('2d');

  try {
    // Asynchronously downloads PDF
    const loadingTask = pdfjsLib.getDocument(pdfUrl);
    const pdf = await loadingTask.promise;

    // Fetch the first page
    const pageNumber = 1;
    const page = await pdf.getPage(pageNumber);

    const scale = 1.5;
    const viewport = page.getViewport({ scale });

    // Support HiDPI-screens.
    const outputScale = window.devicePixelRatio || 1;

    canvas.width = Math.floor(viewport.width * outputScale);
    canvas.height = Math.floor(viewport.height * outputScale);
    canvas.style.width = Math.floor(viewport.width) + 'px';
    canvas.style.height = Math.floor(viewport.height) + 'px';

    const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;

    // Render PDF page into canvas context
    const renderContext = {
      canvasContext: context,
      transform,
      viewport,
    };
    await page.render(renderContext).promise;
    console.log(`Page ${pageNumber} rendered to canvas successfully.`);
  } catch (error) {
    console.error('Error rendering PDF:', error);
  }
}

// Example usage: Make sure you have a <canvas id="pdf-render-canvas"></canvas> in your HTML
// And a PDF file accessible at this URL (e.g., in your public folder)
const samplePdfUrl = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';
renderPdfToCanvas(samplePdfUrl, 'pdf-render-canvas');

/* Example HTML structure:
<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Quickstart</title>
</head>
<body>
  <h1>PDF Viewer</h1>
  <canvas id="pdf-render-canvas" style="border: 1px solid black;"></canvas>
  <script type="module" src="./your-script.js"></script>
</body>
</html>
*/

view raw JSON →