Rendering PDF Pages in Our JavaScript PDF Viewer

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.

Displaying Thumbnails

PSPDFKit’s renderPageAsImageURL method lets you insert a page thumbnail as an image tag:

async function appendThumbnail() {
  const instance = await PSPDFKit.load(myConfiguration);

  // Renders the first page (page index 0).
  const src = await instance.renderPageAsImageURL({ width: 400 }, 0);

  const image = document.createElement("img");
  image.src = src;
  document.body.appendChild(image);
}

To increase the quality of the resulting image, you can provide a greater width value — e.g. 400 * window.devicePixelRatio — and then set the width of the img element to the base size — e.g. 400. Note that the maximum supported size value is 5000px.

If you prefer to show a thumbnail without loading your PDF, you can also render the thumbnail on the server. Add an img for the thumbnail like this:

<img src="https://example.com/documents/abcdefg/cover?width=400&jwt=yourJwt" />

Make sure your JSON Web Token (JWT) contains the "cover-image" permission. You can learn more about the JWT format in our Client Authentication guide.

To find out more details about server-generated thumbnails, check out our guide about rendering images on the server.

Saving a Page as an Image

Using the same method as above, along with the FileSaver.js polyfill, your users can save a single page as a PNG file to their computers:

import { saveAs } from "file-saver";

async function savePagePNG() {
  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");
}