Syncfusion AI Assistant

How can I help you?

Prevent Copy or Print in React PDF Viewer

9 Mar 20263 minutes to read

Overview

This guide shows how to prevent users from copying text or printing documents in EJ2 React PDF Viewer.

Outcome: You will learn server-side and client-side options to restrict copy/print with a complete React example.

Steps

1. Use a PDF with permissions already set

  • Load a PDF that already disallows copy or print functionality itself. The Viewer enforces these permission automatically.

2. Pre process restrictions in server-side

  • Use Syncfusion PDF Library to set permission flags before sending the file to the client. See the server-side example below. See this guide for detailed explanations
  • Disabling print and copy in server-side automatically enforces them in the PDF Viewer.

3. Hide/disable UI elements in the viewer

  • Print, download and copy options can be disabled or hidden in the viewer regardless of the PDF’s permissions.
  • Print and download options can be hidden in the viewer’s primary toolbar. See primary toolbar customization.
  • Copy option in the context menu can be disabled in the PDF Viewer. See customize context menu.

4. Disable print programmatically in the viewer

  • Set enablePrint to false to disable the print UI even if the PDF allows printing.

5. Disable copy via text-selection UI

Example:

The following is a complete React example that demonstrates disabling printing and text selection in the viewer.

import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer, 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/32.2.5/dist/ej2-pdfviewer-lib"
                enablePrint={false}          // disables the print UI
                enableTextSelection={false}  // disables text selection (prevents copy)
                style={{ height: '100%' }}>
                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]} />
            </PdfViewerComponent>
        </div>
    );
}

Expected result:

  • The viewer renders the PDF.
  • Print button and print-related UI are hidden/disabled.
  • Text selection and copy operations from the viewer are disabled.

Troubleshooting

  • If the Print button still appears:
    • Confirm enablePrint is set to false on PdfViewerComponent.
    • If the PDF explicitly allows printing, prefer server-side removal of print permission.
  • If text can still be copied:
    • Confirm enableTextSelection is set to false and your app isn’t adding secondary copy handlers.