Syncfusion AI Assistant

How can I help you?

Customize mobile toolbar in React PdfViewer

3 Mar 20264 minutes to read

Overview

This how-to explains how to enable the desktop toolbar on mobile devices running the Syncfusion React PDF Viewer, and how to preserve touch scrolling when the desktop toolbar is used.

Prerequisites

  • EJ2 React PDF Viewer installed and imported in your React app.
  • For standalone mode: a valid resourceUrl hosting the PDF Viewer assets.
  • For server-backed mode: a working serviceUrl endpoint.

Steps

Step 1: Enable desktop toolbar on mobile: set enableDesktopMode to true on PDF Viewer.

Step 2: (Optional, recommended) Disable text-selection to preserve smooth touch scrolling: set enableTextSelection to false.

Step 3: Inject the Toolbar and other services required by your toolbar features via Inject.

Example:

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
export default function App() {
    return (
        <div>
            <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"
                enableDesktopMode={true}
                enableTextSelection={false}
                height="640px"
            >
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
            </PdfViewerComponent>
        </div>
    );
}
import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
export default function App() {
    return (
        <div>
            <PdfViewerComponent
                id="PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/"
                enableDesktopMode={true}
                enableTextSelection={false}
                height="640px"
            >
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
            </PdfViewerComponent>
        </div>
    );
}

Troubleshooting

  • Print option not visible on mobile: set enableDesktopMode to true; otherwise the mobile toolbar omits Print.
  • Touch scrolling is jerky after enabling desktop toolbar: set enableTextSelection to false to avoid text-selection capturing touch events.
  • Missing assets or broken UI: confirm resourceUrl points to the correct version of the ej2-pdfviewer-lib and is reachable from the device.
  • Server errors in server-backed mode: verify serviceUrl CORS configuration and that the back end is running.