PDF Viewer Component Library

🚀 Available Resources

JS

Main Library (IIFE)

https://viewer.dev.sprkzdoc.com/pdf-viewer.iife.js

Primary JavaScript bundle containing the PDF Viewer component. Use this for modern web applications.

Size: ~2.7MB (minified)

JS

UMD Bundle

https://viewer.dev.sprkzdoc.com/pdf-viewer.umd.js

Universal Module Definition bundle for backward compatibility. Alias to the IIFE bundle.

Size: ~2.7MB (minified)

CSS

Stylesheet

https://viewer.dev.sprkzdoc.com/pdf-viewer.css

Required stylesheet containing all component styles. Must be included for proper rendering.

Size: ~59KB

🎨

PDF Viewer Demo

https://viewer.demo.dev.sprkzdoc.com

Live demonstration of the PDF Viewer component integrated with the FormForge application.

✨ Features

🎯

Web Component

Standard custom element that works everywhere

⚛️

React Compatible

Use directly in React apps without wrappers

📱

Responsive

Works on desktop, tablet, and mobile

🔧

Configurable

Extensive options via HTML attributes

💻 Quick Start

Include the CSS and JavaScript, then use the <pdf-viewer> custom element:

<!-- Include in your HTML head -->
<link rel="stylesheet" href="https://viewer.dev.sprkzdoc.com/pdf-viewer.css">
<script src="https://viewer.dev.sprkzdoc.com/pdf-viewer.iife.js" defer></script>

<!-- Use the custom element -->
<pdf-viewer
  pdf-url="https://example.com/document.pdf"
  show-thumbnails="true"
  show-toolbar="true"
  zoom-percent="100">
</pdf-viewer>
        

📚 Configuration Options

Required:

pdf-url - URL of the PDF document to display

Optional:

show-thumbnails - Show/hide thumbnail sidebar (default: true)
show-toolbar - Show/hide toolbar (default: true)
show-zoom-controls - Show/hide zoom controls (default: true)
zoom-percent - Initial zoom percentage (e.g., 100, 150, 200)
show-photon-erx-button - Show Photon eRx button (default: true)
show-learn-button - Show Learn button (default: true)
show-fill-button - Show Fill button (default: true)

User Information Attributes:

The PDF Viewer component supports passing user information for tracking, analytics, and personalization purposes. All user attributes are optional and can be set individually.

user-id - Unique identifier for the user (e.g., database ID, UUID)
user-name - Display name of the user (e.g., "John Doe")
user-email - Email address of the user
user-role - Role or permission level of the user (e.g., "admin", "viewer", "editor")

<!-- Example with user information -->
<pdf-viewer
  pdf-url="https://example.com/document.pdf"
  user-id="user_12345"
  user-name="Jane Smith"
  user-email="jane.smith@example.com"
  user-role="editor"
  zoom-percent="100">
</pdf-viewer>
          

🔗 Additional Resources

Documentation: See DEPLOYMENT-USAGE.md in the source repository
Test Page: test-deployment.html for interactive examples
Browser Support: Chrome 88+, Firefox 85+, Safari 14+
CDN Caching: Files are cached for 1 year for optimal performance

📄 PDF Viewer Component Library

🚀 Available Resources

✨ Features

💻 Quick Start

📚 Configuration Options

🔗 Additional Resources