How to Disable Toolbar and Set Form to Read-Only in React PDF Viewer?

4 mins read

This article explains how to disable the toolbar and set form fields to read-only mode in a Syncfusion PDF Viewer component within a React application. By following the steps in this guide, users will be able to hide the toolbar in the React PDF viewer and prevent users from interacting with form fields by making them read-only.

Solution:

In this solution, we will utilize Syncfusion’s PDF Viewer component for React to display a PDF document. We will disable the default toolbar in the viewer and set all form fields in the document to read-only mode using React.

Prerequisites:

Syncfusion PDF Viewer Setup: Make sure the Syncfusion PDF Viewer is installed and set up in your React project. Follow the Getting Started with Syncfusion PDFViewer for React guide if you haven’t already.
Basic Knowledge of React: Familiarity with React components and the basic setup of React projects will help you follow along with the implementation.

Code Snippets

index.js

Import Necessary Modules

In your index.js, import the required components from the Syncfusion library:

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
// Import various modules from the Syncfusion PDF Viewer package
import {
  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
  ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
} from '@syncfusion/ej2-react-pdfviewer';

Implement the PDF Viewer and Disable the Toolbar

To create the PDF viewer and disable the toolbar, modify the PdfViewerComponent to disable the default toolbar. Add a button that will toggle the form fields to readonly mode when clicked:

export function App() {
  return (
    <div>
      <div className='control-section'>
        {/* Button to toggle read-only mode for the form fields */}
        <button onClick={readOnly}>readOnly</button>
        {/* PdfViewerComponent to display the PDF document */}
        <PdfViewerComponent
          id="container"
          documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
          resourceUrl="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib"
          style={{ 'height': '680px' }}
          documentLoad={documentLoad} // Event handler for when the document is loaded
          enableNavigationToolbar={false}
          enableToolbar={false} // Disable the default toolbar
        >
          {/* Inject necessary PDF viewer services */}
          <Inject services={[
            Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
            ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner
          ]} />
        </PdfViewerComponent>
      </div>
    </div>
  );
}

Disable Designer Mode and Set Form Fields to Readonly

We now define the logic to disable designer mode and set the form fields to readonly. The readOnly function will iterate through the form fields and set them to readonly:

// Handles the event when the PDF document is loaded
function documentLoad(args) {
  // Get the PDF viewer instance
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.designerMode = false; // Disable designer mode
}

// Function to set all form fields to read-only mode
function readOnly() {
  // Get the PDF viewer instance
  const viewer = document.getElementById('container').ej2_instances[0];
  // Retrieve all form fields in the document
  const forms = viewer.retrieveFormFields();
  // Set each form field to read-only
  forms.forEach(form => {
    form.isReadOnly = true;
    viewer.formDesignerModule.updateFormField(form, { isReadOnly: true });
  });
}

Render the Application

Finally, render the App component in the root of your application:

// React application render setup
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Key Features Used in the Code:

Disabling Toolbar: By setting enableToolbar={false}, the default toolbar in the PDF Viewer is completely disabled, providing a simpler, cleaner viewing experience without any interactive controls.
Readonly Form Fields: The readOnly function iterates through the form fields and sets each one to readonly mode using the form.isReadOnly = true property, ensuring users cannot modify any fields in the PDF document.

Sample:

You can find the full sample code in our GitHub repository

Conclusion:

I hope this article helped you learn how to disable toolbar and set form to read-only in React PDF Viewer.

You can refer to React PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our React PDF Viewer Exampleto understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)