Restrict download or print in React PDF Viewer
15 Jul 20264 minutes to read
Overview
This guide shows how to prevent end users from downloading and printing PDFs displayed by the EJ2 React PDF Viewer.
Outcome: The Download and Print buttons are removed from the primary toolbar, and any download or print attempt (including keyboard shortcuts Ctrl+S and Ctrl+P) is canceled by the downloadStart and printStart event handlers.
Prerequisites
- EJ2 React PDF Viewer installed and basic viewer setup completed. See getting started guide
Steps
1. Hide the Download and Print buttons in the primary toolbar
The viewer toolbar items are controlled by toolbarSettings.toolbarItems. Omit DownloadOption and PrintOption from that array to remove the Download and print button from the primary toolbar. See primary toolbar customization for code examples.
2. Block download with the downloadStart event
The viewer raises the downloadStart event whenever a download is initiated — including from the toolbar, the public download() API, custom UI, or the Ctrl+S keyboard shortcut. Add an event handler and set args.cancel = true to block the operation. See the downloadStart event reference for full event-argument details.
3. Block print with the printStart event
The viewer triggers the printStart event whenever a print action is initiated — including from the toolbar, the public print() API, custom UI, or the Ctrl+P keyboard shortcut. Attach an event handler and set args.cancel = true to block the operation. See the printStart event reference for full event-argument details.
Complete Example:
The following is a complete, runnable React example that hides the Download and Print buttons and cancels every download or print attempt. It assumes the Toolbar and Print services are injected (as shown below).
import {
PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
PageOrganizer, Inject, Print, DownloadStartEventArgs, PrintStartEventArgs
} from '@syncfusion/ej2-react-pdfviewer';
export default function App() {
const onDownloadStart = (args: DownloadStartEventArgs) => {
// Cancels every download attempt
args.cancel = true;
console.log('Download restricted.');
};
const onPrintStart = (args: PrintStartEventArgs) => {
// Cancels every print attempt
args.cancel = true;
console.log('Print restricted.');
};
return (
<div style={{ height: '640px' }}>
<PdfViewerComponent
id="pdf-viewer"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib"
downloadStart={onDownloadStart}
printStart={onPrintStart}
>
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print]} />
</PdfViewerComponent>
</div>
);
}Expected result:
- The Download and Print buttons no longer appear in the primary toolbar because
DownloadOptionandPrintOptionare omitted fromtoolbarSettings.toolbarItems. - Any programmatic or UI-triggered download attempt is canceled by the
downloadStarthandler; no file is downloaded. - Any programmatic or UI-triggered print attempt is canceled by the
printStarthandler; no print dialog is shown.
Troubleshooting
-
If the Download or print button is still visible, remove
DownloadOptionandPrintOptionfromtoolbarSettings.toolbarItems, and ensure no custom toolbar rendering inserts the Download control. -
If downloads still occur despite the handler, confirm
downloadStart={onDownloadStart}is present onPdfViewerComponentand that the handler setsargs.cancel = true. -
If print still occurs despite the handler, confirm
printStart={onPrintStart}is present onPdfViewerComponentand that the handler setsargs.cancel = true.