Print PDF in React PDF Viewer

11 Jul 20266 minutes to read

The React PDF Viewer includes built-in printing via the toolbar and APIs so users can control how documents are printed and monitor the printing process.

Select Print in the built-in toolbar to open the browser print dialog.

Enable or Disable Print in React PDF Viewer

The Syncfusion React PDF Viewer component lets users print a loaded PDF document through the built-in toolbar or programmatic calls. Control whether printing is available by setting the enablePrint property (true enables printing; false disables it; default is true).

The following React example renders the PDF Viewer with printing disabled.

The Print module must be included in the Inject services array; otherwise the print toolbar button and print.print() API are not available.

App.tsx

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
    FormFields, TextSelection, TextSearch, Print, Inject
} from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
    return (
        <div style={{ height: '100vh' }}>
            <PdfViewerComponent
                id="PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
                enablePrint={false}
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
                        Annotation, FormDesigner, FormFields
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Print programmatically in React PDF Viewer

To start printing from code, call the pdfviewer.print.print() method after the document is fully loaded. This approach is useful when wiring up custom UI or initiating printing automatically; calling print() before the document finishes loading can result in no output or no printable content. The print() method takes no parameters and returns void.

App.tsx

import { RefObject, useRef } from 'react';
import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
    FormFields, TextSelection, TextSearch, Print, Inject
} from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent> = useRef(null);
    const printPdf = () => {
        viewerRef.current.print.print();
    }
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={printPdf}>Print</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
                        Annotation, FormDesigner, FormFields
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Key capabilities

• Enable or disable printing with the enablePrint property
• Start printing from UI (toolbar Print) or programmatically using print.print().
• Control output quality with the printScaleFactor property (0.5–5)
• Auto‑rotate pages during print using enablePrintRotation
• Choose where printing happens with printMode (Default or NewWindow)
• Track the life cycle with printStart and printEnd events

Troubleshooting

• Ensure the resourceUrl value matches the installed ej2-pdfviewer-lib package version.
• Calling print() launches the browser print dialog; behavior varies by browser and may be affected by popup blockers or browser settings.

View Sample in GitHub

See Also

• Print quality
• Enable print rotation
• Print modes
• Print events