Barymont PDF Viewer


A PDF viewer built on PDF.js with Barymont branding. Includes support for themes, internationalization, navigation controls, zoom, and maximization functionality.

Features

- 🎨 Customizable themes: Support for default, dark and minimal themes
- 🌍 Internationalization: Support for English (en) and Spanish (es)
- ⌨️ Keyboard navigation: Keyboard shortcuts for navigation and zoom
- 🔍 Advanced zoom: Zoom in/out, predefined levels and automatic adjustment
- 📱 Responsive: Automatically adapts to container size
- 🖼️ Maximization: Fullscreen functionality
- 🎯 TypeScript: Fully typed for better development experience
- 📦 Multiple formats: Available as ESM, CommonJS and IIFE
- 🚀 CDN Ready: Available through unpkg and jsdelivr

Installation

$3

``bash
npm install @barymont/pdf-viewer
`

$3

#### unpkg (Recommended)

`html





`

#### jsDelivr

`html





`

Basic Usage

$3

`javascript
import { createBarymontPDFViewer } from '@barymont/pdf-viewer';

// Create and configure the viewer
const viewer = await createBarymontPDFViewer(
'#pdf-container',
'path/to/document.pdf',
{
theme: 'dark',
locale: 'es',
enableControls: true,
enableKeyboard: true,
}
);
`

$3

`javascript
import { BarymontPDFViewer } from '@barymont/pdf-viewer';

// Create instance
const viewer = new BarymontPDFViewer('#pdf-container', {
theme: 'default',
locale: 'en',
height: '600px',
width: '100%',
});

// Initialize
await viewer.init();

// Load PDF
await viewer.loadPDF('path/to/document.pdf');
`

$3

`html












`

Configuration

$3

`typescript
interface ViewerOptions {
theme?: 'default' | 'dark' | 'minimal'; // Viewer theme
height?: string; // Container height
width?: string; // Container width
enableControls?: boolean; // Enable control bar
enableKeyboard?: boolean; // Enable keyboard shortcuts
enableZoom?: boolean; // Enable zoom functionality
enableOpenPdf?: boolean; // Enable open pdf functionality
defaultScale?: number; // Default scale factor
minScale?: number; // Minimum scale factor
maxScale?: number; // Maximum scale factor
pdfjsVersion?: string; // PDF.js version to load
locale?: 'en' | 'es'; // Interface language
}
`

$3

`javascript
{
theme: 'default',
height: '600px',
width: '100%',
enableControls: true,
enableKeyboard: true,
enableZoom: true,
enableOpenPdf: false,
defaultScale: 1,
minScale: 0.25,
maxScale: 3,
pdfjsVersion: '5.4.149',
locale: 'es'
}
`

API

$3

#### Initialization

- init(): Initialize the viewer
- loadPDF(url: string): Load a PDF from URL
- destroy(): Destroy the viewer instance

#### Navigation

- previousPage(): Go to previous page
- nextPage(): Go to next page
- goToPage(pageNum: number): Go to a specific page

#### Zoom

- zoomIn(): Increase zoom
- zoomOut(): Decrease zoom
- setScale(scale: number): Set specific zoom level
- fitToWidth(): Fit to container width


#### Open PDF

- openPDF(): Open the current PDF document

#### Getters

- getCurrentPage(): Get current page
- getTotalPages(): Get total pages
- getScale(): Get current zoom level
- getPDFDocument(): Get current PDF document

#### Internationalization

- getLocale(): Get current language
- setLocale(locale: 'en' | 'es'): Change language

$3

| Key | Action |
| --------- | -------------------------- |
| ← | Previous page |
| → | Next page |
| + or =| Increase zoom |
| - | Decrease zoom |
| 0 | Fit to width |
| F | Toggle fullscreen |
| Escape | Exit fullscreen |

Complete Example

You can see a complete example with all features in the examples/index.html file. This example includes:

- Complete interface with navigation controls, zoom and fullscreen
- Real-time configuration of themes and languages
- Multiple sample PDFs to test
- Documented keyboard shortcuts
- Real-time information about viewer state
- Responsive design that works on mobile and desktop

$3

``javascript
// Create multiple viewers on the same page
const viewer1 = await createBarymontPDFViewer('#pdf1', 'document1.pdf', {
theme: 'dark',
height: '400px',
});

const viewer2 = await createBarymontPDFViewer('#pdf2', 'document2.pdf', {
theme: 'minimal',
height: '500px',
locale: 'en',
});
`

$3

`javascript
const viewer = await createBarymontPDFViewer('#pdf-container');

// Load PDF dynamically
document.getElementById('load-btn').addEventListener('click', async () => {
const url = document.getElementById('pdf-url').value;
await viewer.loadPDF(url);
});

// Zoom control
document.getElementById('zoom-in').addEventListener('click', () => {
viewer.zoomIn();
});

// Navigation
document.getElementById('prev').addEventListener('click', () => {
viewer.previousPage();
});
`

$3

`javascript
const viewer = await createBarymontPDFViewer('#pdf-container', null, {
theme: 'default'
});

// Change theme dynamically
function changeTheme(theme) {
viewer.options.theme = theme;
// Recreate the viewer with the new theme
viewer.destroy();
const newViewer = new BarymontPDFViewer('#pdf-container', {
theme: theme,
// ... other options
});
await newViewer.init();
}
`

Custom Styles

The viewer uses Shadow DOM to encapsulate its styles. Themes are applied automatically, but you can customize the appearance:

`css
/ Customize the viewer container /
#pdf-container {
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
}

/ Customize the main container /
#pdf-container::part(viewer) {
background-color: #f5f5f5;
}
``

System Requirements

- Browsers: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
- PDF.js: Loads automatically (version 5.4.149 by default)

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Developed with ❤️ by the Barymont team