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'
// ... other imports
import { PrintPluginPackage } from '@embedpdf/plugin-print/svelte'
 
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 composable for initiating the print job with a component that handles the browser interaction.

1. Triggering a Print Job

Use the usePrintCapability composable 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.

<script lang="ts">
import { usePrintCapability } from '@embedpdf/plugin-print/svelte';
 
const print = usePrintCapability();
let isPrinting = $state(false);
 
const handlePrint = () => {
  if (!print.provides || isPrinting) return;
  isPrinting = true;
  
  // Prints the entire document
  const printTask = print.provides.print();
 
  printTask.wait(
    () => { isPrinting = false; }, // On success
    (error) => { isPrinting = false; console.error(error) }, // On failure
  );
};
</script>
 
<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

Composable: usePrintCapability()

This composable 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).