Docmentis Udoc Viewer

https://www.npmjs.com/package/@docmentis/udoc-viewer
Admin
Docmentis Udoc Viewer is a universal, framework-agnostic document viewer for the web that renders...
Tokens:6,113
Snippets:59
Trust Score:9.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install udoc-viewer package

Source: https://www.docmentis.com/viewer/guide

Install the package using npm, yarn, or pnpm.

```bash
npm install @docmentis/udoc-viewer
```

```bash
yarn add @docmentis/udoc-viewer
```

```bash
pnpm add @docmentis/udoc-viewer
```

--------------------------------

### Initialize UDocClient and Viewer

Source: https://www.docmentis.com/viewer/guide

Basic setup to load the WASM engine and render a document into a container element.

```typescript
import { UDocClient } from '@docmentis/udoc-viewer';

// Create a client (loads the WASM engine)
const client = await UDocClient.create();

// Create a viewer attached to a container element
const viewer = await client.createViewer({
  container: '#viewer'
});

// Load a document
await viewer.load('https://example.com/document.pdf');

// Clean up when done
viewer.destroy();
client.destroy();
```

--------------------------------

### Loading Documents

Source: https://www.docmentis.com/viewer/guide

Provides examples of how to load documents into the viewer from various sources, and how to close the current document.

```APIDOC
## Loading Documents

The viewer accepts multiple document sources:

### Request Example
```javascript
// From URL
await viewer.load('https://example.com/document.pdf');

// From File object (e.g., from file input)
await viewer.load(file);

// From raw bytes
await viewer.load(new Uint8Array(buffer));

// Close current document
viewer.close();
```
```

--------------------------------

### Viewer Initialization and Options

Source: https://www.docmentis.com/viewer/guide

Demonstrates how to create a viewer instance with various configuration options. The viewer can be used in UI mode (with a container) or headless mode.

```APIDOC
## Client Options

### Client Options Table
Option| Type| Default| Description  
---|---|---|---  
license| string| —| License key for commercial use. Runs in free mode if not provided  
baseUrl| string| —| Custom base URL for worker and WASM files. Expected files: {baseUrl}/worker.js and {baseUrl}/udoc_bg.wasm  
locale| string| en| Locale for UI strings and date formatting  

## Viewer Options

### Viewer Options Table
Option| Type| Default| Description  
---|---|---|---  
container| string | HTMLElement| —| Container element or CSS selector (required for UI mode, omit for headless)  
scrollMode| ScrollMode| continuous| Scroll mode: 'continuous' or 'spread'  
layoutMode| LayoutMode| single-page| Layout mode: 'single-page', 'double-page', 'double-page-odd-right', 'double-page-odd-left'  
pageRotation| number| 0| Initial page rotation: 0, 90, 180, or 270  
spacingMode| SpacingMode| all| Spacing mode: 'all', 'none', 'spread-only', 'page-only'  
zoomMode| ZoomMode| fit-spread-width| Zoom mode: 'fit-spread-width', 'fit-spread-width-max', 'fit-spread-height', 'fit-spread', 'custom'  
zoom| number| 1| Initial zoom level (when zoomMode is 'custom')  
zoomSteps| number[]| [0.1, 0.25, 0.5, ...]| Custom zoom steps for zoom in/out. Default: [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4, 5]  
minZoom| number| 0.1| Minimum zoom level  
maxZoom| number| 5| Maximum zoom level  
pageSpacing| number| 10| Spacing between pages in pixels  
spreadSpacing| number| 20| Spacing between spreads in pixels  
thumbnailWidth| number| 150| Width of thumbnail images in pixels. Height is derived from page aspect ratio  
dpi| number| 96| Target display DPI  
theme| string| light| Color theme: 'light', 'dark', or 'system'  
disableThemeSwitching| boolean| false| Hide the theme toggle button  
disableTextSelection| boolean| false| Disable text selection and copying  
googleFonts| boolean| true| Enable automatic font fetching from Google Fonts for fonts not embedded in the document  
activePanel| string | null| null| Initially active panel. Left: 'thumbnail', 'outline', 'bookmarks', 'layers', 'attachments'. Right: 'search', 'comments'. Or null  
disableLeftPanel| boolean| false| Disable the entire left panel area  
disableRightPanel| boolean| false| Disable the entire right panel area  
disableThumbnails| boolean| false| Disable the thumbnails tab  
disableOutline| boolean| false| Disable the outline tab  
disableBookmarks| boolean| false| Disable the bookmarks tab  
disableLayers| boolean| false| Disable the layers tab  
disableAttachments| boolean| false| Disable the attachments tab  
disableSearch| boolean| false| Disable the search panel  
disableComments| boolean| false| Disable the comments panel  
hideToolbar| boolean| false| Hide the top toolbar  
hideFloatingToolbar| boolean| false| Hide the floating toolbar (page nav, zoom, view mode)  
disableFullscreen| boolean| false| Remove the fullscreen button  
hideAttribution| boolean| false| Hide the 'Powered by docMentis' attribution link. Requires a valid license with the 'no_attribution' feature  
enablePerformanceCounter| boolean| false| Enable performance tracking  
onPerformanceLog| function| —| Callback for performance log entries (called when enablePerformanceCounter is true)  

### UI Mode vs Headless Mode
When you provide a `container`, the viewer renders with full UI (toolbar, thumbnails, etc.). Without a container, it runs in headless mode for programmatic use.

### Request Example
```javascript
const viewer = await client.createViewer({
  // Container element or CSS selector (required for UI mode)
  container: '#viewer',

  // --- View modes ---
  scrollMode: 'continuous',     // 'continuous' or 'spread'
  layoutMode: 'single-page',   // 'single-page', 'double-page', etc.
  pageRotation: 0,              // 0, 90, 180, or 270
  spacingMode: 'all',           // 'all', 'none', 'spread-only', 'page-only'

  // --- Zoom ---
  zoomMode: 'fit-spread-width',
  zoom: 1,
  minZoom: 0.1,
  maxZoom: 5,

  // --- Theme ---
  theme: 'light',               // 'light', 'dark', or 'system'

  // --- Panels ---
  activePanel: null,             // 'thumbnail', 'outline', 'search', etc.
  disableSearch: false,
  disableThumbnails: false,

  // --- UI visibility ---
  hideToolbar: false,
  hideFloatingToolbar: false,
  disableFullscreen: false,
  hideAttribution: false,        // requires license with 'no_attribution'
});
```
```

--------------------------------

### Configure license and attribution

Source: https://www.docmentis.com/viewer/guide

Initialize the client with a license key and optionally hide the attribution link if the license includes the no_attribution feature.

```javascript
const client = await UDocClient.create({
  license: 'eyJ2Ijox...',
});

const viewer = await client.createViewer({
  container: '#viewer',
  hideAttribution: true,
});

// Check license status
console.log(client.license);
// { valid: true, tier: "licensed", features: ["no_attribution"], ... }

console.log(client.hasFeature('no_attribution')); // true
```

--------------------------------

### Configure UDocClient

Source: https://www.docmentis.com/viewer/guide

Advanced client initialization with optional license, base URL, and locale settings.

```javascript
const client = await UDocClient.create({
  // License key for commercial use (optional)
  license: 'your-license-key',

  // Custom base URL for worker and WASM files (optional)
  // Expected files: {baseUrl}/worker.js and {baseUrl}/udoc_bg.wasm
  baseUrl: 'https://cdn.example.com/udoc/',

  // Locale for UI strings (optional, default: 'en')
  locale: 'en',
});
```

--------------------------------

### Configure udoc-viewer instance

Source: https://www.docmentis.com/viewer/guide

Initialize the viewer with specific UI, zoom, and layout settings using the createViewer method.

```javascript
const viewer = await client.createViewer({
  // Container element or CSS selector (required for UI mode)
  container: '#viewer',

  // --- View modes ---
  scrollMode: 'continuous',     // 'continuous' or 'spread'
  layoutMode: 'single-page',   // 'single-page', 'double-page', etc.
  pageRotation: 0,              // 0, 90, 180, or 270
  spacingMode: 'all',           // 'all', 'none', 'spread-only', 'page-only'

  // --- Zoom ---
  zoomMode: 'fit-spread-width',
  zoom: 1,
  minZoom: 0.1,
  maxZoom: 5,

  // --- Theme ---
  theme: 'light',               // 'light', 'dark', or 'system'

  // --- Panels ---
  activePanel: null,             // 'thumbnail', 'outline', 'search', etc.
  disableSearch: false,
  disableThumbnails: false,

  // --- UI visibility ---
  hideToolbar: false,
  hideFloatingToolbar: false,
  disableFullscreen: false,
  hideAttribution: false,        // requires license with 'no_attribution'
});
```

--------------------------------

### Integrate with HTML

Source: https://www.docmentis.com/viewer/guide

Standard HTML implementation using a module script.

```html
<div id="viewer" style="width: 100%; height: 600px;"></div>

<script type="module">
  import { UDocClient } from "@docmentis/udoc-viewer";

  const client = await UDocClient.create();
  const viewer = await client.createViewer({ container: "#viewer" });
  await viewer.load("/path/to/document.pdf");
</script>
```

--------------------------------

### Render Pages in Headless Mode

Source: https://www.docmentis.com/viewer/guide

Generate images from document pages without initializing the full UI, suitable for thumbnails or exports.

```javascript
// Create headless viewer (no container)
const viewer = await client.createViewer();
await viewer.load(pdfBytes);

// Render page to ImageData (0-based page index)
const imageData = await viewer.renderPage(0, { scale: 2 });

// Render to Blob
const blob = await viewer.renderPage(0, {
  format: 'blob',
  imageType: 'image/png'
});

// Render to data URL
const dataUrl = await viewer.renderPage(0, {
  format: 'data-url',
  imageType: 'image/jpeg',
  quality: 0.9
});

// Render a thumbnail
const thumb = await viewer.renderThumbnail(0, { scale: 1 });
```

--------------------------------

### Control View and Theme Settings

Source: https://www.docmentis.com/viewer/guide

Adjust zoom levels, layout modes, rotation, themes, and text selection settings.

```javascript
// Zoom
viewer.zoomIn();
viewer.zoomOut();
viewer.setZoom(1.5);                  // 150%
viewer.setZoomMode('fit-spread-width');
viewer.setMinZoom(0.5);               // clamp minimum to 50%
viewer.setMaxZoom(3);                 // clamp maximum to 300%
console.log(viewer.zoom);            // current zoom level
console.log(viewer.zoomMode);        // current zoom mode

// View modes
viewer.setScrollMode('continuous');    // 'continuous' | 'spread'
viewer.setLayoutMode('double-page');   // 'single-page' | 'double-page' | ...
viewer.setPageRotation(90);            // 0 | 90 | 180 | 270
viewer.setSpacingMode('none');         // 'all' | 'none' | 'spread-only' | 'page-only'

// Theme
viewer.setTheme('dark');               // 'light' | 'dark' | 'system'
viewer.setThemeSwitchingEnabled(false); // hide theme toggle button
console.log(viewer.theme);            // current theme

// Text selection
viewer.setTextSelectionEnabled(false); // disable text selection

// Fullscreen
viewer.setFullscreen(true);
console.log(viewer.isFullscreen);
```

--------------------------------

### Compose Documents

Source: https://www.docmentis.com/viewer/guide

Create a new document by selecting specific pages and rotations from existing documents, then export the result.

```javascript
// Create a new document from pages of existing documents
const [newDoc] = await client.compose([
  [
    { doc: viewerA, pages: "1-3" },
    { doc: viewerB, pages: "5", rotation: 90 }
  ]
]);

// Export the composed document
const bytes = await newDoc.toBytes();
await newDoc.download('composed.pdf');
```

--------------------------------

### Integrate with React

Source: https://www.docmentis.com/viewer/guide

React component implementation using hooks for lifecycle management.

```jsx
import { useEffect, useRef } from "react";
import { UDocClient } from "@docmentis/udoc-viewer";

function DocumentViewer({ src }) {
  const containerRef = useRef(null);

  useEffect(() => {
    let client, viewer;

    (async () => {
      client = await UDocClient.create();
      viewer = await client.createViewer({
        container: containerRef.current,
      });
      await viewer.load(src);
    })();

    return () => {
      viewer?.destroy();
      client?.destroy();
    };
  }, [src]);

  return <div ref={containerRef} style={{ width: "100%", height: "600px" }} />;
}
```

--------------------------------

### Handle Password-Protected Documents

Source: https://www.docmentis.com/viewer/guide

Use this pattern to programmatically authenticate documents that require a password in headless mode.

```javascript
await viewer.load(source);

if (await viewer.needsPassword()) {
  const success = await viewer.authenticate('my-password');
  if (!success) {
    console.error('Incorrect password');
  }
}
```

--------------------------------

### Manage UI Component Visibility

Source: https://www.docmentis.com/viewer/guide

Toggle the visibility of toolbars, panels, and specific UI features at runtime.

```javascript
// Toolbar visibility
viewer.setToolbarVisible(false);
viewer.setFloatingToolbarVisible(false);

// Fullscreen button
viewer.setFullscreenEnabled(false);

// Disable entire panel areas
viewer.setLeftPanelEnabled(false);
viewer.setRightPanelEnabled(false);

// Disable individual panel tabs
// Panels: 'thumbnail', 'outline', 'bookmarks', 'layers',
//         'attachments', 'search', 'comments'
viewer.setPanelEnabled('thumbnail', false);
viewer.setPanelEnabled('search', false);

// Open/close panels programmatically
viewer.openPanel('outline');
viewer.closePanel();
```

--------------------------------

### Navigate Document Pages

Source: https://www.docmentis.com/viewer/guide

Methods for moving between pages or jumping to specific destinations within the document.

```javascript
// Get current page (1-based)
const page = viewer.currentPage;

// Go to a specific page (1-based)
viewer.goToPage(5);

// Navigate to next/previous page
viewer.nextPage();
viewer.previousPage();

// Navigate to a destination (from outline)
viewer.goToDestination(destination);
```

--------------------------------

### Load documents into viewer

Source: https://www.docmentis.com/viewer/guide

Load documents from different sources including URLs, File objects, or raw byte arrays, and close the current document.

```javascript
// From URL
await viewer.load('https://example.com/document.pdf');

// From File object (e.g., from file input)
await viewer.load(file);

// From raw bytes
await viewer.load(new Uint8Array(buffer));

// Close current document
viewer.close();
```

--------------------------------

### Export and Download Documents

Source: https://www.docmentis.com/viewer/guide

Extract document data as bytes or trigger a browser download.

```javascript
// Export document as raw bytes
const bytes = await viewer.toBytes();

// Download document to user's device
await viewer.download('document.pdf');
```

--------------------------------

### Access Document Information

Source: https://www.docmentis.com/viewer/guide

Retrieve metadata, page dimensions, outline structure, and annotations for a loaded document.

```javascript
// Check if document is loaded
if (viewer.isLoaded) {
  // Get page count
  const total = viewer.pageCount;

  // Get document metadata
  const meta = viewer.metadata;
  console.log(`Title: ${meta?.title}, Author: ${meta?.author}`);

  // Get page dimensions (0-based index)
  const info = await viewer.getPageInfo(0);
  console.log(`Page 1: ${info.width} x ${info.height} points`);

  // Get document outline (table of contents)
  const outline = await viewer.getOutline();

  // Get annotations on a page (0-based index)
  const annotations = await viewer.getPageAnnotations(0);
}
```

--------------------------------

### Split Documents by Outline

Source: https://www.docmentis.com/viewer/guide

Split a document based on its top-level bookmarks, with optional configuration for depth and page filtering.

```javascript
// Split a document by its top-level bookmarks
const result = await client.splitByOutline(viewer);
console.log(`Split into ${result.viewers.length} documents`);
result.sections.forEach((section, i) => {
  console.log(`Document ${i}: ${section.title}`);
});

// Split with options
const result = await client.splitByOutline(viewer, {
  maxLevel: 2,         // Include up to 2 levels of bookmarks
  splitMidPage: true,  // Filter content when sections share a page
});
```

--------------------------------

### Subscribe to viewer events

Source: https://www.docmentis.com/viewer/guide

Register listeners for various viewer lifecycle and interaction events. The document:load event returns an unsubscribe function to stop listening.

```javascript
// Document loaded
const unsubscribe = viewer.on('document:load', ({ pageCount }) => {
  console.log(`Loaded ${pageCount} pages`);
});

// Document closed
viewer.on('document:close', () => {
  console.log('Document closed');
});

// Page changed
viewer.on('page:change', ({ page, previousPage }) => {
  console.log(`Page ${previousPage} -> ${page}`);
});

// Panel opened/closed
viewer.on('panel:change', ({ panel, previousPanel }) => {
  console.log(`Panel: ${previousPanel} -> ${panel}`);
});

// UI component visibility changed
viewer.on('ui:visibilityChange', ({ component, visible }) => {
  console.log(`${component} is now ${visible ? 'visible' : 'hidden'}`);
});

// Download progress
viewer.on('download:progress', ({ loaded, total, percent }) => {
  console.log(`Downloaded ${loaded}/${total} bytes (${percent}%)`);
});

// Error occurred
viewer.on('error', ({ error, phase }) => {
  console.error(`Error during ${phase}:`, error);
});

// Unsubscribe
unsubscribe();
```

--------------------------------

### Perform Programmatic Search

Source: https://www.docmentis.com/viewer/guide

Execute text searches and navigate through results programmatically.

```javascript
// Open search panel and search for text
viewer.search('hello world');

// Search with options
viewer.search('hello', { caseSensitive: true });

// Navigate between matches
viewer.searchNext();
viewer.searchPrev();

// Clear search
viewer.clearSearch();
```

--------------------------------

### Split by Outline

Source: https://www.docmentis.com/viewer/guide

Split a document into multiple smaller documents based on its top-level bookmarks.

```APIDOC
## POST /splitByOutline

### Description
Splits a document by its outline bookmarks. Supports options to limit depth and handle mid-page splits.

### Parameters
#### Request Body
- **viewer** (object) - Required - The source document viewer instance.
- **options** (object) - Optional - Configuration object including `maxLevel` (number) and `splitMidPage` (boolean).
```

--------------------------------

### Document Composition

Source: https://www.docmentis.com/viewer/guide

Compose a new document by selecting specific pages from existing documents, with support for page rotation.

```APIDOC
## POST /compose

### Description
Creates a new document by cherry-picking and rotating pages from existing documents.

### Parameters
#### Request Body
- **pages** (array) - Required - An array of objects containing the source document reference and page range/rotation settings (e.g., { doc: viewer, pages: "1-3", rotation: 90 }).

### Request Example
{
  "pages": [
    { "doc": "viewerA", "pages": "1-3" },
    { "doc": "viewerB", "pages": "5", "rotation": 90 }
  ]
}
```

--------------------------------

### Dispose of viewer resources

Source: https://www.docmentis.com/viewer/guide

Clean up resources to prevent memory leaks. Always destroy the viewer before the client, as the client manages the underlying WASM engine.

```javascript
// Destroy the viewer first
viewer.destroy();

// Then destroy the client
client.destroy();
```

--------------------------------

### Compress & Decompress

Source: https://www.docmentis.com/viewer/guide

Optimize document file size or prepare documents for inspection by modifying filter encodings.

```APIDOC
## POST /compress

### Description
Compresses a document using FlateDecode, object streams, and compressed xref.

## POST /decompress

### Description
Decompresses a document by removing all filter encodings.
```

--------------------------------

### Override CSS Variables

Source: https://www.docmentis.com/viewer/guide

Customize viewer appearance by overriding CSS custom properties within the .udoc-viewer-root scope.

```css
/* Override the primary color */
.udoc-viewer-root {
  --udoc-primary: #e91e63;
  --udoc-primary-hover: #c2185b;
}

/* Override dark theme colors */
.udoc-viewer-root.udoc-viewer-dark {
  --udoc-primary: #f48fb1;
  --udoc-primary-hover: #f06292;
}
```

--------------------------------

### Compress and Decompress Documents

Source: https://www.docmentis.com/viewer/guide

Optimize document size or remove filter encodings for inspection.

```javascript
// Compress a document (FlateDecode, object streams, compressed xref)
const compressedBytes = await client.compress(viewer);

// Decompress a document (remove all filter encodings)
const decompressedBytes = await client.decompress(viewer);

// Save the result
const blob = new Blob([compressedBytes], { type: 'application/pdf' });
```

--------------------------------

### Extract Assets

Source: https://www.docmentis.com/viewer/guide

Extract embedded images or fonts from a document.

```APIDOC
## POST /extractImages

### Description
Extracts all embedded images from a document. Supports optional conversion to PNG.

## POST /extractFonts

### Description
Extracts all embedded fonts from a document.
```

--------------------------------

### Extract Embedded Images

Source: https://www.docmentis.com/viewer/guide

Retrieve embedded images from a document, with an option to convert raw data to PNG format.

```javascript
// Extract all embedded images from a document
const images = await client.extractImages(viewer);
for (const image of images) {
  console.log(`${image.name}: ${image.format} (${image.width}x${image.height})`);
  // image.data contains the raw image bytes
}

// Convert raw images to PNG for easier viewing
const pngImages = await client.extractImages(viewer, {
  convertRawToPng: true,
});
```

--------------------------------

### Extract Embedded Fonts

Source: https://www.docmentis.com/viewer/guide

Retrieve all embedded fonts from a document for inspection.

```javascript
// Extract all embedded fonts from a document
const fonts = await client.extractFonts(viewer);
for (const font of fonts) {
  console.log(`${font.name}: ${font.fontType} (.${font.extension})`);
  // font.data contains the raw font bytes
}
```
Tokens:
Raw