Getting Started with PDFium for JavaScript

This guide will walk you through the basics of using the @embedpdf/pdfium library to work with PDF documents in your web application.

Installation

First, install the library using npm, pnpm, yarn or bun:


npm i @embedpdf/pdfium


pnpm add @embedpdf/pdfium


yarn add @embedpdf/pdfium


bun add @embedpdf/pdfium

Initializing PDFium

Before you can use any PDFium functions, you need to initialize the library:


import { init, WrappedPdfiumModule } from '@embedpdf/pdfium';
 
const pdfiumWasm = 'https://cdn.jsdelivr.net/npm/@embedpdf/pdfium/dist/pdfium.wasm';
 
let pdfiumInstance: WrappedPdfiumModule | null = null;
 
async function initializePdfium() {
  if (pdfiumInstance) return pdfiumInstance;
  
  const response = await fetch(pdfiumWasm);
  const wasmBinary = await response.arrayBuffer();
  pdfiumInstance = await init({ wasmBinary });
  
  // Initialize the PDFium extension library
  // This is required before performing any PDF operations
  pdfiumInstance.PDFiumExt_Init();
  
  return pdfiumInstance;
}
 
const pdfium = await initializePdfium();

The initializePdfium function returns a promise that resolves to a PDFium module object. This object contains all the PDFium functions you can use.

Important: PDFiumExt_Init()

The call to PDFiumExt_Init() is critical and must be done before performing any PDF operations. This function initializes the PDFium extension library with proper configurations and ensures that the subsequent PDFium calls work correctly. Failing to call this function may result in unexpected behavior or crashes.

Basic Workflow

Working with PDFs in PDFium typically follows this pattern:

Initialize PDFium (including calling PDFiumExt_Init())
Load a PDF document
Perform operations on the document (render pages, extract text, etc.)
Clean up resources

Here’s a simple example that loads a PDF and gets its page count:

PREVIEW:Get PDF Page Count

get-pdf-page-count.ts


import { init, WrappedPdfiumModule } from '@embedpdf/pdfium';
 
const pdfiumWasm = 'https://cdn.jsdelivr.net/npm/@embedpdf/pdfium/dist/pdfium.wasm';
 
let pdfiumInstance: WrappedPdfiumModule | null = null;
 
async function initializePdfium() {
  if (pdfiumInstance) return pdfiumInstance;
  
  const response = await fetch(pdfiumWasm);
  const wasmBinary = await response.arrayBuffer();
  pdfiumInstance = await init({ wasmBinary });
  
  // Initialize the PDFium extension library
  pdfiumInstance.PDFiumExt_Init();
  
  return pdfiumInstance;
}
 
async function getPdfPageCount(pdfData: Uint8Array) {
  // Step 1: Initialize PDFium
  const pdfium = await initializePdfium();
 
  // Step 2: Load the PDF document
  const filePtr = pdfium.pdfium.wasmExports.malloc(pdfData.length);
  pdfium.pdfium.HEAPU8.set(pdfData, filePtr);
  const docPtr = pdfium.FPDF_LoadMemDocument(filePtr, pdfData.length, 0);
 
  if (!docPtr) {
    const error = pdfium.FPDF_GetLastError();
    pdfium.pdfium.wasmExports.free(filePtr);
    throw new Error(`Failed to load PDF: ${error}`);
  }
 
  try {
    // Step 3: Get the page count
    const pageCount = pdfium.FPDF_GetPageCount(docPtr);
    return pageCount;
  } finally {
    // Step 4: Clean up
    pdfium.FPDF_CloseDocument(docPtr);
    pdfium.pdfium.wasmExports.free(filePtr);
  }
}
 
// Usage
fetch('sample.pdf')
  .then(response => response.arrayBuffer())
  .then(buffer => getPdfPageCount(new Uint8Array(buffer)))
  .then(pageCount => {
    console.log(`The PDF has ${pageCount} pages`);
  })
  .catch(error => console.error(error));

Memory Management

When working with PDFium, you need to manage memory manually. This is because PDFium is a WebAssembly module that uses a separate memory space.

Allocating Memory

Use pdfium.pdfium.wasmExports.malloc(size) to allocate memory:


const bufferSize = 1024;
const bufferPtr = pdfium.pdfium.wasmExports.malloc(bufferSize);

Freeing Memory

Always free memory when you’re done with it:


pdfium.pdfium.wasmExports.free(bufferPtr);

Using try/finally for Cleanup

To ensure resources are properly cleaned up even if errors occur, use try/finally blocks:


const filePtr = pdfium.pdfium.wasmExports.malloc(pdfData.length);
pdfium.pdfium.HEAPU8.set(pdfData, filePtr);
const docPtr = pdfium.FPDF_LoadMemDocument(filePtr, pdfData.length, 0);
 
try {
  // Use the document...
} finally {
  // Clean up
  pdfium.FPDF_CloseDocument(docPtr);
  pdfium.pdfium.wasmExports.free(filePtr);
}