Generate PDF Thumbnails Using JavaScript

In addition to rendering PDFs in the viewer, you can use PSPDFKit for Web to render single PDF pages as images. This can be useful when you want to, for example, display a thumbnail of a single page of a PDF.

Saving a Page as an Image

PSPDFKit’s renderPageAsImageURL method will render the page as an image and return a URL that can be used to fetch the contents of that image:

const instance = await PSPDFKit.load(myConfiguration);
const src = await instance.renderPageAsImageURL({ width: 400 }, 0);

To increase the quality of the resulting image, you can provide a greater width value — e.g. 400 * window.devicePixelRatio.

After this, you can save a single page as a PNG file to your users’ computers using the FileSaver.js library:

import { saveAs } from "file-saver";

const instance = await PSPDFKit.load(myConfiguration);

// Renders the first page (page index 0).
const src = await instance.renderPageAsImageURL({ width: 2000 }, 0);
saveAs(src, "pdf-page.png");