Generate PDF thumbnail previews with pdf2pic in Node.js

Prerequisites

This guide is server-side first, with a browser-side variant at the end. You’ll need Node.js, plus a system-level image processing tool (pdf2pic shells out to either GraphicsMagick or ImageMagick).

You’ll also need:

• Node.js 14 or later
• pdf2pic from npm
• GraphicsMagick (brew install graphicsmagick/apt-get install graphicsmagick) — or ImageMagick as an alternative
• Ghostscript (brew install ghostscript/apt-get install ghostscript) — required for PDF parsing alongside GraphicsMagick
• For the browser variant — a loaded PDFDocumentProxy from pdfjs-dist

When building a document management system, you often need thumbnail images of PDF pages for preview galleries, search results, or file cards. pdf2pic converts PDF pages to images in Node.js.

Install

Install pdf2pic from npm:

npm install pdf2pic

# macOS
brew install graphicsmagick ghostscript

# Ubuntu/Debian
sudo apt-get install graphicsmagick ghostscript

Basic usage: First page preview

fromBuffer takes a PDF buffer and a set of conversion options. It then returns a function for converting individual pages:

import { fromBuffer } from "pdf2pic";

async function generatePreview(pdfBuffer) {
  const options = {
    preserveAspectRatio: true,
    height: 600,
    quality: 80,
    format: "png",
  };

  const convert = fromBuffer(pdfBuffer, options);

  // Convert page 1, get result as a Buffer.
  const output = await convert(1, { responseType: "buffer" });

  return output.buffer; // PNG image as Buffer.
}

Options

Response types

The responseType option controls what shape convert() returns the result in:

// Get as Buffer (for storage/upload).
const output = await convert(1, { responseType: "buffer" });
output.buffer; // Buffer

// Get as base64 string (for embedding in HTML).
const output = await convert(1, { responseType: "base64" });
output.base64; // string

// Save to file.
const convert = fromBuffer(pdfBuffer, {
  ...options,
  savePath: "./thumbnails",
  saveFilename: "preview",
});
const output = await convert(1);
output.path; // "./thumbnails/preview.1.png"

Multiple pages

Looping over convert() with each page number generates a thumbnail for every page in the document:

async function generateThumbnails(pdfBuffer, pageCount) {
  const convert = fromBuffer(pdfBuffer, {
    preserveAspectRatio: true,
    height: 200,
    quality: 60,
    format: "jpeg",
  });

  const thumbnails = [];
  for (let page = 1; page <= pageCount; page++) {
    const output = await convert(page, { responseType: "buffer" });
    thumbnails.push({
      page,
      image: output.buffer,
    });
  }

  return thumbnails;
}

For large documents, pdf2pic also exposes a .bulk() method that takes an array of page numbers (or -1 for all pages) and returns the same result objects in a single call:

const convert = fromBuffer(pdfBuffer, options);
const results = await convert.bulk(-1, { responseType: "buffer" });

Integration: Upload preview to cloud storage

The generated buffer can be uploaded directly to a storage bucket, without writing it to disk first:

async function processNewPdf(pdfBuffer, fileId) {
  // Generate preview.
  const preview = await generatePreview(pdfBuffer);

  // Upload to cloud storage (e.g. Google Cloud Storage).
  await bucket.file(`previews/${fileId}.png`).save(preview, {
    contentType: "image/png",
  });
}

Alternative: Browser-side thumbnails with PDF.js

If you need thumbnails in the browser (not server-side), use PDF.js directly:

async function renderPageToCanvas(pdfDocument, pageNumber, scale = 0.3) {
  const page = await pdfDocument.getPage(pageNumber);
  const viewport = page.getViewport({ scale });

  const canvas = document.createElement("canvas");
  canvas.width = viewport.width;
  canvas.height = viewport.height;

  await page.render({
    canvasContext: canvas.getContext("2d"),
    viewport,
  }).promise;

  return canvas.toDataURL("image/jpeg", 0.8);
}

Key points

• pdf2pic is the simplest Node.js solution for PDF-to-image conversion.
• pdf2pic requires GraphicsMagick or ImageMagick as a system dependency.
• fromBuffer is the most common entry point for server-side processing.
• Use responseType: "buffer" for cloud storage uploads.
• For browser-side thumbnails, use PDF.js’s page.render() with a small scale factor.
• Keep quality at 60–80 for thumbnails — no need for full quality on small images.

How Nutrient Web SDK handles thumbnails

Nutrient Web SDK ships a built-in thumbnail sidebar that’s enabled with a single state change — no rendering, sizing, or DOM management required on your end:

instance.setViewState((v) =>
  v.set("sidebarMode", NutrientViewer.SidebarMode.THUMBNAILS),
);

For server-side thumbnail generation, Nutrient Document Engine exposes a PDF-to-image REST API that produces page images without GraphicsMagick or ImageMagick on the host.

Learn more about Nutrient Web SDK | Thumbnail sidebar guide | PDF-to-image conversion | Migration guide | Contact Sales

FAQ