Print plugin

The print plugin provides a button to print the current PDF document. It is possible to customize the button as well.

Install

npm install '@react-pdf-viewer/print';

Usage

• Import the plugin and styles:

import { printPlugin } from '@react-pdf-viewer/print';

// Import styles
import '@react-pdf-viewer/print/lib/styles/index.css';

• Create the plugin instance:

const printPluginInstance = printPlugin();

The plugin instance printPluginInstance provides the following properties:

• Finally, register the print plugin instance:

<Viewer
    fileUrl='...'
    plugins={[
        printPluginInstance,
    ]}
/>

Properties

The print plugin provides other useful property as following:

import { PrintIcon } from '@react-pdf-viewer/print';

Example: Use the default print button

The following example uses the default print button <PrintButton />.

// Your render function
const printPluginInstance = printPlugin();
const { PrintButton } = printPluginInstance;

return (
    <div
        style={{
            border: '1px solid rgba(0, 0, 0, 0.3)',
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
        }}
    >
        <div
            style={{
                alignItems: 'center',
                backgroundColor: '#eeeeee',
                borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
                display: 'flex',
                padding: '4px',
            }}
        >
            <PrintButton />
        </div>
        <div
            style={{
                flex: 1,
                overflow: 'hidden',
            }}
        >
            <Viewer
                fileUrl='/assets/pdf-open-parameters.pdf'
                plugins={[
                    printPluginInstance,
                ]}
            />
        </div>
    </div>
);

(The sample code)

Example: Customize the print button

The Print component has a render prop that allows consumers to use a custom button. Here is the sample code that demonstrates the ability:

import { RenderPrintProps } from '@react-pdf-viewer/print';

const printPluginInstance = printPlugin();
const { Print } = printPluginInstance;

// Your render function
<Print>
{
    (props: RenderPrintProps) => (
        <button
            style={{
                backgroundColor: '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: 'pointer',
                padding: '8px',
            }}
            onClick={props.onClick}
        >
            Print
        </button>
    )
}
</Print>

(The sample code)