PDF Web SDK Documentation

Comprehensive Guide for Developers: UI & SDK Integration, Configuration, and API Reference

PDF Web SDK
    Preparing search index...

    Interface IPdfEditorResult

    Result object returned from PDF editor initialization.

    This is the main return type from PdfEditor function. It provides access to:

    • UI elements and services for managing document views
    • The initialized SDK for headless PDF operations
    const result = await PdfEditor({ container, license: 'your-key' });

    // Access UI components
    const { pdfWebElement, pdfWebService } = result.ui;

    // Use SDK for document operations
    const document = await result.sdk.openDocument({ file: pdfFile });

    Headless Mode: Users can work with PDFs without the UI by using the sdk field:

    const result = await PdfEditor({ container, license: 'your-key' });
    const document = await result.sdk.openDocument({ file: pdfFile });

    Alternatively, users can use PdfSdk directly from '@avanquest/pdf-web-viewer/sdk'. In this case, PdfSdk.initialize must be called manually before any operations:

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

    await PdfSdk.initialize({ license: 'your-key' }); // add basePath if assets aren't at the domain root / auto-detectable
    const document = await PdfSdk.openDocument({ file: pdfFile });
    interface IPdfEditorResult {
        error?: Error;
        isLoading?: boolean;
        sdk: IPdfSdk;
        ui: {
            documentTabs: IDocumentTabsAPI;
            pdfWebElement: IDocumentViewerWrapperElement;
            pdfWebService: IDocumentViewService;
            showSnackbar: (
                type: SnackbarType,
                message: string,
                options?: ShowSnackbarOptions,
            ) => ISnackbarHandle;
        };
    }
    Index

    Properties

    error? isLoading? sdk ui

    Properties

    error?: Error

    Error that occurred during initialization, if any.

    isLoading?: boolean

    Loading state indicator.

    sdk: IPdfSdk

    The initialized PDF SDK instance. Use this for headless PDF operations such as:

    • Opening documents: result.sdk.openDocument({ file })
    • Creating blank documents: result.sdk.openBlankDocument()
    • Listing system fonts: result.sdk.listSystemFonts()
    • Registering user fonts: result.sdk.registerUserFonts(fonts)

    The SDK is already initialized when returned from PdfEditor().

    ui: {
        documentTabs: IDocumentTabsAPI;
        pdfWebElement: IDocumentViewerWrapperElement;
        pdfWebService: IDocumentViewService;
        showSnackbar: (
            type: SnackbarType,
            message: string,
            options?: ShowSnackbarOptions,
        ) => ISnackbarHandle;
    }

    UI components for the PDF editor.

    Type declaration

    • documentTabs: IDocumentTabsAPI

      Headless API for building a custom document tab bar.

      Always available regardless of whether the built-in tab bar is visible. Set layoutConfig.tabBar.enabled = false to hide the built-in bar and use this API to drive your own tab UI instead.

      result.ui.documentTabs.tabs$.subscribe(tabs => renderMyTabBar(tabs));
      result.ui.documentTabs.closeTab(tabId);
    • pdfWebElement: IDocumentViewerWrapperElement

      The PDF editor wrapper element. This element contains the document view and UI controls. When hideToolsPanel: true is set, the toolbar and panels are hidden but the wrapper element is still used for consistent API.

    • pdfWebService: IDocumentViewService

      Service for managing document view instances. Use this service to:

      • Get the primary document view element
      • Access document view state and configuration
      • Control document rendering and display
    • showSnackbar: (
          type: SnackbarType,
          message: string,
          options?: ShowSnackbarOptions,
      ) => ISnackbarHandle

      Show one of the viewer's own snackbars, so a host application can report something in the same place and style the viewer already uses for its notices, instead of a dialog of its own.

      message is looked up as a translation key first and falls back to being rendered verbatim, so both a bundled key and a plain sentence work.

      result.ui.showSnackbar('error', 'The file is open in another application.');

      Pass options for a long-running job: a progress ring and a trailing action button. The returned handle drives the snackbar while it is up — write progress or message to update it in place, close() to dismiss it, and read isClosed to see whether the user got there first.

      Every write is ignored once it has closed, so a late tick from a finished job cannot resurrect it. The ring only moves on a snackbar shown with a progress value; it is not added retroactively.

      const bar = result.ui.showSnackbar('info', 'Recognizing your document’s content…', {
        duration: null,
        progress: 0,
        action: { label: 'Cancel', onClick: () => job.abort() },
      });

      job.onProgress((percent) => (bar.progress = percent));
      job.onDone(() => bar.close());

    Settings

    Member Visibility

    On This Page

    Properties