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 with Form Data API, theming, and event handling.

Size: ~2.7MB (minified) | Gzipped: ~728KB

CSS

Stylesheet

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

Required stylesheet with support for custom theming via CSS variables.

Size: ~59KB

🎨

Live Demo - FormForge

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

Interactive demonstration with Form Data API integration. Click Submit to see form data retrieval in action!

✨ Key Features

🎯

Web Component

Standard custom element that works with any framework

⚛️

React Compatible

Use directly in React apps without wrappers

📊

Form Data API

Complete API for retrieving and validating form data

🎨

Custom Theming

Brand the viewer with your colors and fonts

📱

Responsive

Works on desktop, tablet, and mobile devices

✍️

Digital Signatures

Capture typed, drawn, or uploaded signatures

📎

File Attachments

Support for attaching files to form fields

🔐

Role-Based Access

Field visibility based on user roles

💻 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">
</pdf-viewer>
        

React Example

// In your React component
function MyComponent() {
  const viewerRef = useRef<any>(null);

  const handleSubmit = () => {
    const formData = viewerRef.current?.getFormData();
    console.log('Form data:', formData);
  };

  return (
    <pdf-viewer
      ref={viewerRef}
      pdf-url="https://example.com/form.pdf"
      show-submit-button="true" />
  );
}
        

📊 Form Data API (NEW!)

Access form field data, validation state, and statistics programmatically via JavaScript.

🎯 Complete Integration Example

Visit viewer.demo.dev.sprkzdoc.com to see the Form Data API in action. Fill out some fields and click Submit to see comprehensive form data retrieval!

Available Methods

getFormData(options?)

Get comprehensive form data with optional filtering (dirty, invalid, required fields only)

getFieldValues()

Get lightweight field names and values only (minimal payload)

isFormValid()

Check if entire form passes client-side validation

hasChanges()

Check if form has any unsaved changes

getFieldCounts()

Get field statistics (total, visible, dirty, invalid, required)

getAttachmentData(id)

Retrieve full attachment data including base64 encoded file content

Usage Example

// Get reference to the pdf-viewer element
const viewer = document.querySelector('pdf-viewer');

// Check if form is valid before submission
if (viewer.isFormValid()) {
  // Get all form data
  const formData = viewer.getFormData();
  console.log('Fields:', formData.fields);
  console.log('Metadata:', formData.meta);

  // Or get just the values
  const values = viewer.getFieldValues();
  console.log('Values:', values);
} else {
  // Get only invalid fields
  const invalid = viewer.getFormData({ onlyInvalid: true });
  console.error('Invalid fields:', invalid.fields);
}

// Check for unsaved changes
if (viewer.hasChanges()) {
  alert('You have unsaved changes!');
}
        

🎨 Custom Theming

Customize colors, fonts, and styling to match your brand identity.

<!-- Custom theme via JSON attribute -->
<pdf-viewer
  pdf-url="https://example.com/document.pdf"
  theme='{
    "colors": {
      "primary": "#ff6b35",
      "secondary": "#004c8c",
      "roles": {
        "provider": {"color": "#2c3e50", "bgcolor": "#ecf0f1"},
        "patient": {"color": "#3498db", "bgcolor": "#ebf5fb"}
      }
    },
    "typography": {
      "fontFamily": "Inter, sans-serif"
    }
  }'>
</pdf-viewer>
        

🔔 Event Handling

Listen for Submit and Attach button clicks to implement custom workflows.

// Method 1: Event Listeners
const viewer = document.querySelector('pdf-viewer');

viewer.addEventListener('submit', (event) => {
  console.log('Submit clicked!', event.detail.pdfUrl);
  // Your custom submission logic here
});

viewer.addEventListener('attach', (event) => {
  console.log('Attach clicked!', event.detail.pdfUrl);
  // Open file picker or handle attachments
});

// Method 2: Property Callbacks
viewer.onSubmit = (event) => {
  const formData = viewer.getFormData();
  submitToAPI(formData);
};
        

📚 Configuration Attributes

Required

pdf-url - URL of the PDF document to display

Display Options

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

Context Attributes

role - User role for field visibility (Provider, Patient, Staff, HubAgent)
slug - Workflow identifier
user-info - JSON string with user information (name, email, phone, role)
workflow-context - JSON string with workflow state
pdf-metadata - JSON string with PDF metadata
theme - JSON string with custom theme configuration

📖 Documentation

Comprehensive guides available in the source repository:

REACT_EMBEDDING_GUIDE.md - Complete React integration guide with TypeScript support
FORM_DATA_API.md - API specification and reference
FORM_DATA_API_EXAMPLES.md - Practical usage examples and patterns
THEMING_COMPLETE.md - Theming guide with examples
CALLBACK_HANDLERS.md - Event handling documentation
DEPLOYMENT-USAGE.md - General usage and configuration

🌐 Browser Compatibility

Chrome/Edge 88+
Firefox 85+
Safari 14+
Mobile browsers with Web Component support

⚡ Performance

Bundle Size: ~2.7MB minified, ~728KB gzipped
CDN Caching: Files cached for 1 year for optimal performance
Loading Strategy: Use defer or async for non-blocking load
Self-Contained: Includes React, PDF.js, Material-UI - no external dependencies

🔗 Quick Links

🎨

Live Demo