Document Viewer Wrapper Element

The index.IDocumentViewerWrapperElement interface represents the custom HTML element that wraps the PDF viewer UI. It provides methods to dynamically update the viewer's configuration, such as theme, layout, and user settings.

Accessing the Element

You can access the index.IDocumentViewerWrapperElement instance from the result of PdfEditor:

const editor = await PdfEditor({ ... });
const wrapper = editor.ui.pdfWebElement;
Copy

Dynamic Configuration

The wrapper element allows you to update configuration options at runtime without reloading the viewer.

Theme

Change the theme (light/dark) or custom colors:

wrapper.setTheme({
  pallet: 'dark',
  customProperties: {
    '--pwv-primary-color': '#ff0000',
  },
});
Copy

Layout

Update the layout configuration. The configuration uses an "opt-out" approach, meaning elements are enabled by default unless explicitly disabled.

wrapper.setLayout({
  header: {
    tabs: {
      list: {
        // Disable the 'tools' tab
        tools: { enabled: false },
      },
    },
  },
});
Copy

Language

Change the UI language:

wrapper.setLanguage({
  code: 'fr',
});
Copy

Branding

Update branding settings:

wrapper.setBranding({
  logoSvg: '<svg>...</svg>',
  name: 'My Custom PDF Viewer',
  contactUsUrl: 'https://example.com/contact',
  description: 'A custom PDF viewer implementation',
});
Copy

Units and Guides

Update the measurement units and grid settings:

import { Units } from '@avanquest/pdf-web-viewer';

wrapper.setUnitsAndGuides({
  units: Units.centimeters,
  grid: {
    width: 50,
    height: 50,
    lineColor: '#cccccc',
  },
});
Copy

User Settings

User Name

Set the user name used for annotations:

wrapper.setUserName('Jane Doe');
Copy

User Signature & Initials

Set the user's saved signatures and initials. Note that you need to provide the full AppearanceModel.

import { AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const signature = {
  type: AppearanceDataType.Type,
  appearanceType: AppearanceType.Signature,
  timestamp: Date.now(),
  signimage: {
    path: '...', // Path data if applicable
    ext: 'png',
    img: '...', // Base64 image data
  },
};

wrapper.setUserSignature([signature]);
Copy

User Fonts

Register custom fonts for use in the editor:

wrapper.setUserFonts([
  {
    family: 'MyCustomFont',
    category: 'sans-serif',
    files: { regular: 'url(/fonts/MyCustomFont.ttf)' },
    kind: 'webfonts#webfont',
    lastModified: '2022-01-01',
    menu: 'MyCustomFont',
    subsets: ['latin'],
    variants: ['regular'],
    version: '1.0',
  },
]);
Copy

Default Font

Set the default font for text tools:

wrapper.setDefaultFont({
  family: 'Arial',
  size: 12,
});
Copy

User Default Font

Set the user's preferred default font (overrides system default):

wrapper.setUserDefaultFont({
  family: 'MyCustomFont',
  size: 14,
});
Copy

Advanced Operations

Apply User Appearance

Programmatically apply a user's signature or initial appearance.

wrapper.applyUserAppearance({
  path: '...',
  ext: 'png',
  img: '...',
});
Copy

Set Document View

Manually set the active document view element (advanced use case for custom view management):

wrapper.setDocumentView(myDocumentViewElement);
Copy

API Reference

Properties

Property	Type	Description
documentView	index.IDocumentView | null	The currently active document view element inside the wrapper.
options	index.ISetupOptions | null	The current setup options.

Methods

Method	Description
setTheme(themeConfig: index.IThemeConfig): void	Updates the theme configuration.
setLayout(layoutConfig: index.ILayoutConfig): void	Updates the layout configuration.
setLanguage(language: index.ILanguageConfig): void	Updates the language configuration.
setBranding(brandingConfig: index.IBrandingConfig): void	Updates the branding configuration.
setUserName(userName: string): void	Sets the current user's name.
setUserSignature(signature: index.AppearanceModel[]): void	Sets the user's saved signatures.
setUserInitial(initial: index.AppearanceModel[]): void	Sets the user's saved initials.
setUserFonts(userFonts: index.IUserFont[]): void	Registers custom user fonts.
setDefaultFont(fontConfig: index.IDefaultFontConfig): void	Sets the default font for text tools.
setUserDefaultFont(fontConfig: index.IDefaultFontConfig): void	Sets the user's preferred default font.
setUnitsAndGuides(config: index.IUnitsAndGuidesConfig): void	Updates units and guides settings.
applyUserAppearance(appearance: index.FillSignSignatureFieldCreateParams): void	Applies a user appearance to a field.
setDocumentView(documentView: index.IDocumentView): void	Sets the active document view.
destroy(): void	Cleans up the element and its resources.