renderPage

Renders a full PDF page into an image.

Signature

renderPage(
  doc: PdfDocumentObject,
  page: PdfPageObject,
  options?: PdfRenderPageOptions
): PdfTask<T>;

Description

This is the primary method for creating a visual representation of a PDF page. It renders the entire page content, including text, graphics, and optionally annotations, into an image buffer. The output format, scaling, and rotation can be customized via the options parameter.

The generic type T will be a Blob in browser environments and a Buffer in Node.js, depending on the configured imageDataConverter.

Parameters

PdfRenderPageOptions Details

Returns

PdfTask<T>

A Task that resolves with the rendered image (Blob or Buffer). This can be displayed in an <img> tag, drawn on a canvas, or saved to a file.

The Task will be rejected if the document or page handle is invalid.

See Concepts: Tasks for more on how to handle asynchronous operations.

Example

// Assuming 'engine' and an open 'document' object are available
 
async function renderFirstPage(doc) {
  try {
    const firstPage = doc.pages[0];
    
    const imageBlob = await engine.renderPage(doc, firstPage, {
      scaleFactor: 1.5, // Render at 150% zoom
      withAnnotations: true,
    }).toPromise();
 
    // In a browser, you can create a URL to display the image
    const imageUrl = URL.createObjectURL(imageBlob);
    document.getElementById('my-image-element').src = imageUrl;
 
  } catch (error) {
    console.error('Failed to render page:', error);
  }
}

See Also

• renderPageRect