# pdf-viewer-default

> PDF viewer sample for loading, viewing, navigating, searching, and printing a PDF document.

**Framework:** javascript  **Component:** PdfViewer  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/javascript/pdf-viewer-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-pdfviewer
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/pdf-viewer-default/default.html

```html
<div class="control-section">
    <div class="content-wrapper">
        
        <div id="pdfViewer" style="height:calc(100vh - 230px); width:100%;">
    </div>
</div>

<div id="action-description">
    <p>This sample demonstrate the core features of PDF Viewer such as PDF viewing, printing, navigation, text search and selection, zooming, panning etc. with its built-in toolbar.</p>
</div>

<div id="description">
    <p>
        This sample demonstrates the default rendering of the Syncfusion JavaScript PDF Viewer component with its built-in toolbar. The viewer loads a PDF document and
        provides support for viewing, page navigation, magnification, panning, text selection and copying, text search with match case support, bookmark navigation, thumbnail view, hyperlink navigation, printing, and annotation and form field support.
    </p>

    <p><strong>Key Features</strong></p>
    <ul>
        <li><strong>PDF Viewer rendering</strong> - Loads and displays PDF documents from a remote URL with the default built-in toolbar.</li>
        <li><strong>Page navigation</strong> - Navigate through pages using the built-in toolbar with previous, next, and direct page number input.</li>
        <li><strong>Magnification and panning</strong> - Zoom in, zoom out, fit-to-page, and pan across document pages for comfortable viewing.</li>
        <li><strong>Text selection and search</strong> - Select, copy, and search for text within the document with match case support.</li>
        <li><strong>Bookmark and thumbnail navigation</strong> - Navigate via bookmarks and page thumbnail overview panels.</li>
        <li><strong>Hyperlink navigation</strong> - Click in-document hyperlinks to navigate to linked destinations.</li>
        <li><strong>Print PDF documents</strong> - Print the loaded PDF document directly from the viewer toolbar.</li>
        <li><strong>Annotation and form field support</strong> - Includes injected modules for annotations, form fields, form designer, and page organizer.</li>
   </ul>
    <p><strong>Documentation Links</strong></p>
    <ul>
        <li><a target="_blank" href="https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started">Getting Started with JavaScript PDF Viewer</a></li>
        <li><a target="_blank" href="https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar-customization/primary-toolbar">Toolbar Customization</a></li>
        <li><a target="_blank" href="https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/magnification/magnification">Magnification</a></li>
    </ul>

    <p><strong>More Resources</strong></p>
    <ul>
        <li><a target="_blank" href="https://ej2.syncfusion.com/javascript/documentation/pdfviewer">PDF Viewer API Reference</a></li>
        <li><a target="_blank" href="https://www.syncfusion.com/javascript-ui-controls/js-pdf-viewer">JavaScript PDF Viewer Overview</a></li>
    </ul>
</div>

```

### src/components/pdf-viewer-default/default.ts

```typescript
import { loadCultureFiles } from '../common/culture-loader';
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
// tslint:disable-next-line:max-line-length
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer);

/**
 * Default PdfViewer sample
 */
(window as any).default = (): void => {
    loadCultureFiles();
    let viewer: PdfViewer = new PdfViewer();
    viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
    viewer.resourceUrl ="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib";
       
    
    
    viewer.appendTo('#pdfViewer');
};

```