Toolbar in React Pdfviewer component
30 Jan 202317 minutes to read
The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails.
The following table shows built-in toolbar items and its actions:-
Option | Description |
---|---|
OpenOption | This option provides an action to load the PDF documents to the PDF Viewer. |
PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools. |
MagnificationTool | This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools |
PanTool | This option provides an action for panning the pages in the PDF Viewer. |
SelectionTool | This option provides an action to enable/disable the text selection in the PDF Viewer. |
SearchOption | This option provides an action to search a word in the PDF documents. |
PrintOption | This option provides an action to print the PDF document being loaded in the PDF Viewer. |
DownloadOption | This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer. |
UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer. |
AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer. |
FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer. |
Show/Hide the default toolbar
The PDF Viewer has an option to show or hide the complete default toolbar. You can achieve this by using following two ways.,
- Show/Hide toolbar using enableToolbar API as in the following code snippet
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (
<div>
<div className='control-section'>
{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
enableToolbar={false}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
style=height>
<Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, Annotation, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (
<div>
<div className='control-section'>
{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
enableToolbar={false}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
style=height>
<Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, Annotation, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
- Show/Hide toolbar using showToolbar as in the following code snippet
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
function showToolbarClicked() {
var viewer = document.getElementById('container').ej2_instances[0];
viewer.toolbar.showToolbar(false);
}
return (
<div>
<div className='control-section'>
<button onClick={showToolbarClicked}>ShowToolbarItem</button>
{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
style=height>
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
function showToolbarClicked() {
var viewer = document.getElementById('container').ej2_instances[0];
viewer.toolbar.showToolbar(false);
}
return (
<div>
<div className='control-section'>
<button onClick={showToolbarClicked}>ShowToolbarItem</button>
{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
style=height>
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
Show/Hide the default toolbaritem
The PDF Viewer has an option to show or hide these grouped items in the default toolbar.
- Show/Hide toolbaritem using toolbarSettings as in the following code snippet.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Annotation, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (
<div>
<div className='control-section'>
{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
toolbarSettings=
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
style=height>
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Annotation, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
return (
<div>
<div className='control-section'>
{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
toolbarSettings=
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
style=height>
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
- Show/Hide toolbaritem using showToolbaritem as in the following code snippet
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Annotation, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
function showToolbarClicked() {
var viewer = document.getElementById('container').ej2_instances[0];
viewer.toolbar.showToolbarItem(["OpenOption"],false);
}
return (
<div>
<div className='control-section'>
<button onClick={showToolbarClicked}>ShowToolbarItem</button>
{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
style=height>
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Annotation, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
function showToolbarClicked() {
var viewer = document.getElementById('container').ej2_instances[0];
viewer.toolbar.showToolbarItem(["OpenOption"],false);
}
return (
<div>
<div className='control-section'>
<button onClick={showToolbarClicked}>ShowToolbarItem</button>
{/* Render the PDF Viewer */}
<PdfViewerComponent
id="container"
documentPath="PDF_Succinctly.pdf"
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
style=height>
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch]} />
</PdfViewerComponent>
</div>
</div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);