@barymont/pdf-viewer

v1.0.8

Published

6 months ago

A PDF viewer built on top of PDF.js with Barymont branding

0High
0Medium
0Low

pixelao

pdf viewer pdfjs typescript cdn browser document viewer

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

NPM

npm install @barymont/pdf-viewer

CDN

unpkg (Recommended)

<!-- ESM -->
<script type="module">
  import { createBarymontPDFViewer } from 'https://unpkg.com/@barymont/pdf-viewer@latest/dist/barymont-pdf-viewer.esm.js';
</script>

<!-- IIFE -->
<script src="https://unpkg.com/@barymont/pdf-viewer@latest/dist/barymont-pdf-viewer.iife.min.js"></script>

jsDelivr

<!-- ESM -->
<script type="module">
  import { createBarymontPDFViewer } from 'https://cdn.jsdelivr.net/npm/@barymont/pdf-viewer@latest/dist/barymont-pdf-viewer.esm.js';
</script>

<!-- IIFE -->
<script src="https://cdn.jsdelivr.net/npm/@barymont/pdf-viewer@latest/dist/barymont-pdf-viewer.iife.min.js"></script>

Basic Usage

With Factory Function (Recommended)

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,
  }
);

With Direct Class

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');

Usage with CDN

<!DOCTYPE html>
<html>
  <head>
    <title>Barymont PDF Viewer</title>
  </head>
  <body>
    <div id="pdf-container"></div>

    <script src="https://unpkg.com/barymont-pdf-viewer@latest/dist/barymont-pdf-viewer.iife.min.js"></script>
    <script>
      // Wait for the library to load
      window.addEventListener('load', async () => {
        const viewer = await window.createBarymontPDFViewer(
          '#pdf-container',
          'document.pdf',
          {
            theme: 'dark',
            locale: 'es',
          }
        );
      });
    </script>
  </body>
</html>

Configuration

Viewer Options

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
}

Default Values

{
  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

Main Methods

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

Keyboard Shortcuts

| 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

Multiple Viewers

// 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',
});

Programmatic Control

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();
});

Dynamic Theme Change

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:

/* 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