Print

Print the document at 150 DPI with progress and a cancel button, or hand printing to the browser's own PDF viewer.

Basics

The print button renders every page at 150 DPI into a hidden frame, then opens the browser’s print dialog.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Print renders every page into a hidden iframe, then opens the print dialog. return <PdfViewer source="/samples/multipage.pdf" />; }

While pages are prepared, a status message shows the progress with a Cancel button, so long documents never look frozen. Failures reach onError as PRINT_FAILED. Each page prints on a sheet of its own size, so a document that mixes page sizes prints correctly.

Opening the PDF instead

printMode="open-url" opens the document in a new tab and lets the browser’s built-in viewer print it.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Opens the PDF in a new tab and leaves printing to the browser's own viewer. return <PdfViewer source="/samples/letter-3pages.pdf" printMode="open-url" />; }

Intercepting print

onPrint runs before printing starts. Return false to print your own way, for example through a server-generated copy.

<PdfViewer
  source={url}
  onPrint={() => {
    window.open(`/reports/${id}/print`, '_blank');
    return false;
  }}
/>

Customization

Rename the button and the progress message through labels.

import { PdfViewer, type PdfViewerLabels } from '@kingtech/react-pdf-viewer'; const labels: Partial<PdfViewerLabels> = { print: 'Print document', printProgress: (done, total) => `Preparing page ${done} of ${total}…`, cancel: 'Stop', }; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" labels={labels} />; }

See the customization guide.

Advanced / escape hatch

print() on the imperative API prints from your own controls; its promise resolves after the print dialog closes.

Limitations

The print dialog itself cannot be canceled by the app. Cancel stops page preparation; once the browser’s dialog is open, it belongs to the browser.
Printing is rasterised. Pages are rendered to images for printing, so text is not selectable in a printed-to-PDF copy. Workaround: printMode="open-url" prints through the browser’s viewer, which keeps vector text.
Hidden in compact layouts. Below compactBreakpoint the print button is hidden outside fullscreen by default. Workaround: toolbar={{ hiddenWhenCompact: [] }}.
Prepared pages are held in memory. Every page is kept as an image until the dialog closes, so printing a very long document needs a lot of memory. Workaround: printMode="open-url", which hands the document to the browser.
Sheet sizes need named-page support. Browsers without CSS named pages print every sheet at the first page’s size (pages are scaled to fit, never cut).
open-url needs a plain URL. Only an http(s) URL loaded without fetcher or requestInit opens as is, because a new tab would not send those headers. Binary sources and every other URL open as a temporary object URL, which some pop-up blockers block. Workaround: use the default render mode.

API

PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.