Introduction to PDF Web Viewer

What is PDF Web Viewer?

PDF Web Viewer is a powerful JavaScript Document SDK and UI Component Library that provides a complete solution for viewing, annotating, and editing PDF documents directly in the browser. It's built with performance and ease of integration in mind.

Key Features

• 📄 Full PDF Editing: Edit text, images, and page layouts
• ✏️ Annotations & Markup: Highlight, underline, sticky notes, and drawing tools
• 📝 Forms: Fill, flatten, and sign interactive PDF forms (AcroForms)
• 🔒 Security: Redaction, password protection, and digital signatures
• 🎨 Customizable UI: Out-of-the-box responsive interface with white-label ready styling
• ⚡ High Performance: Powered by WebAssembly for smooth rendering
• 🔧 Framework Compatible: Works with React, Angular, Vue, Svelte, and vanilla JavaScript
• 🌍 Server-Side Ready: Node.js SDK for batch processing and server-side operations

UI vs SDK (Headless)

The @avanquest/pdf-web-viewer package contains two distinct ways to interact with the PDF engine:

1. UI Mode: The complete viewer with toolbar, sidebar, and pre-built user interface.
2. SDK (Headless) Mode: The core PDF processing engine without any UI, ideal for custom interfaces or server-side processing.

Feature	Headless SDK	UI Mode
User Interface	❌ None	✅ Full toolbar & sidebar
Programmatic API	✅ Full	✅ Full
Document Rendering	✅ Yes	✅ Yes
Browser Only	❌ No (Node.js ready)	✅ Yes
Custom UI	✅ Build your own	❌ Use built-in
Server-Side Processing	✅ Yes	❌ No

Accessing the SDK

There are two ways to access the SDK:

1. Via PdfEditor result (recommended for UI apps):

   const editor = await PdfEditor({ container, license });
   const doc = await editor.sdk.openDocument({ file }); // SDK already initialized
   Copy

2. Direct import (for headless/server-side):

   import { PdfSdk } from '@avanquest/pdf-web-viewer/sdk';
   await PdfSdk.initialize({ license, workerPath }); // Must initialize first!
   const doc = await PdfSdk.openDocument({ file });
   Copy

Asset Separation

To optimize your deployment, you only need to include the assets relevant to your usage mode:

• Common Assets (Required for both):

  • pwv-workers: WebAssembly workers for PDF processing.
  • pwv-fonts: Standard fonts for rendering.

• UI-Only Assets (Not needed for Headless SDK):

  • pwv-i18n: Localization files for the UI.
  • pwv-stamps: Default stamp images for the annotation tool.

Quick Start

1. Install PDF Web Viewer

npm install @avanquest/pdf-web-viewer
Copy

2. Copy Assets and Resources

Copy the worker files from node_modules to your public folder:

cp -R ./node_modules/@avanquest/pdf-web-viewer/dist/public ./public
Copy

For webpack, use copy-webpack-plugin:

new CopyPlugin({
  patterns: [{
    from: 'node_modules/@avanquest/pdf-web-viewer/dist/public',
    to: 'public',
  }],
}),
Copy

For Vite, create a plugin to copy assets on build start.

3. Initialize PDF Web Viewer

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

const editor = await PdfEditor({
  container: document.getElementById('viewer'),
  license: 'YOUR_LICENSE_KEY' /*  Use trial (no key needed) or your license  */,
  workerPath: '/public/pwv-workers/pdfworker.js',
});

/* Open a document using the document view service */
const file = /* File object from input or fetch */;
await editor.ui.pdfWebService.openDocument(file);

/* Or use the SDK directly for programmatic operations */
const doc = await editor.sdk.openDocument({ file });
Copy

Using SDK Directly (Headless Mode)

For headless operations without UI, you can import PdfSdk directly:

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

/* Must initialize before use */
await PdfSdk.initialize({
  license: 'YOUR_LICENSE_KEY',
  workerPath: '/public/pwv-workers/pdfworker.js',
});

/* Perform operations */
const doc = await PdfSdk.openDocument({ file: pdfFile });
Copy

License

To extend your trial or get a production license, visit our licensing page.

Documentation

• Quick Start - HTML - HTML integration guide
• Server-Side SDK - Node.js SDK guide
• UI Integration Overview - How to integrate and customize the UI
• SDK Integration Guide - How to integrate SDK
• Full API Reference - Detailed API documentation

Licensing

PDF Web Viewer will run in trial mode until a license is provided. For more information, visit our licensing page.