Print Plugin

The Print Plugin provides a simple and effective way to print your PDF document. It prepares a high-quality, print-ready version of the file and opens the browser’s native print dialog for the user.

Installation

The plugin is available as a separate NPM package.

npm install @embedpdf/plugin-print

pnpm add @embedpdf/plugin-print

yarn add @embedpdf/plugin-print

bun add @embedpdf/plugin-print

Registration

Import PrintPluginPackage and add it to the plugins array in your viewer. This plugin has no configuration options.

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
// ... other imports
import { PrintPluginPackage } from '@embedpdf/plugin-print/react'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Register the print plugin
  createPluginRegistration(PrintPluginPackage),
]

Usage

The plugin works by combining a hook for initiating the print job with a component that handles the browser interaction.

1. Triggering a Print Job

Use the usePrintCapability hook to get access to the plugin’s print method. You can call this method from any component, such as a button in your toolbar.

The print method returns a Task, which allows you to track the progress and handle success or failure, perfect for showing a loading state to the user.

import { useState } from 'react';
import { usePrintCapability } from '@embedpdf/plugin-print/react';
 
export const PrintToolbar = () => {
  const { provides: print } = usePrintCapability();
  const [isPrinting, setIsPrinting] = useState(false);
 
  const handlePrint = () => {
    if (!print || isPrinting) return;
    setIsPrinting(true);
    const printTask = print.print(); // Prints the entire document
 
    printTask.wait(
      () => setIsPrinting(false), // On success
      (error) => setIsPrinting(false), // On failure
    );
  };
 
  return (
    <button onClick={handlePrint} disabled={isPrinting}>
      {isPrinting ? 'Preparing...' : 'Print'}
    </button>
  );
};

2. Handling the Print Dialog (Behind the Scenes)

The plugin automatically adds a hidden <PrintFrame /> component to your application. You do not need to render this component yourself.

When you call provides.print(), this component listens for the prepared document, loads it into an invisible <iframe>, and calls the browser’s window.print() method to open the print dialog. This entire process is handled for you.

Live Example

This example shows a viewer with a print button. Clicking it will prepare the document and open your browser’s print dialog.

API Reference

Hook: usePrintCapability()

This hook connects your component to the print plugin’s functions.

Returns

PrintCapability Methods

PdfPrintOptions

The options object passed to the print method. (Type imported from @embedpdf/models).