HTML Usage

This guide explains how to use the PDF Web SDK in an HTML application.

Option 1: Simple HTML Integration

The simplest way to integrate the PDF Web SDK is to use it directly in an HTML file.

Step 1: Copy Required Assets

First, you need to copy the required asset folders from the package to your project's root directory (next to your index.html).

Copy these folders from node_modules/@avanquest/pdf-web-viewer/public/:

• pwv-workers/ -> Copy to ./pwv-workers/
• pwv-fonts/ -> Copy to ./pwv-fonts/
• pwv-i18n/ -> Copy to ./pwv-i18n/
• pwv-stamps/ -> Copy to ./pwv-stamps/
• pwv-cursors/ -> Copy to ./pwv-cursors/

If you enable cloud drives, also copy their OAuth redirect pages: pwv-dropbox/, pwv-onedrive/, pwv-netexplorer/.

Your project structure should look like this:

/my-project
  /node_modules
  /pwv-cursors
  /pwv-fonts
  /pwv-i18n
  /pwv-stamps
  /pwv-workers
  index.html
Copy

Step 2: Create your HTML file

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web PDF Viewer</title>
    <style>
      #pdf-container {
        width: 100%;
        height: 100vh;
        /* The container must have a fixed size */
      }
    </style>
  </head>
  <body>
    <div id="pdf-container"></div>
    <script type="module">
      import { PdfEditor } from './node_modules/@avanquest/pdf-web-viewer/ui/index.js';

      /* Initialize the PDF viewer */
      /* Assets are loaded from the domain root (/pwv-workers, /pwv-fonts, …) by default; set basePath if you host them elsewhere */
      const editor = await PdfEditor({
        license: 'YOUR_LICENSE_KEY' /* Replace with your license key */,
        container: document.getElementById('pdf-container') /* Specify the container element */,
      });

      /* To open a document programmatically: */
      /* const file = new File([arrayBuffer], 'document.pdf', { type: 'application/pdf' }); */
      /* await editor.ui.pdfWebService.openDocument(file); */
      /* Or use SDK: await editor.sdk.openDocument({ file }); */
    </script>
  </body>
</html>
Copy

Option 2: Vite HTML Integration

For a more modern development experience, you can use Vite to build your HTML application:

Step 1: Set up a Vite project

# Create a new Vite project
npm create vite@latest pdf-viewer-app -- --template vanilla
# Navigate to the project directory
cd pdf-viewer-app
# Install dependencies
npm install
# Install PDF Web SDK and RxJS
npm install https://cdn-developers.avanquest.com/websdk-files/packages/pdf-web-viewer/0.11.8/avanquest-pdf-web-viewer-0.11.8.tgz rxjs
# Install fs-extra for the asset copying
npm install fs-extra --save-dev
Copy

Step 2: Configure Vite for PDF assets

Create or modify vite.config.js:

import { defineConfig } from 'vite';
import { resolve } from 'path';
import fs from 'fs-extra';

/* Function to copy assets during build */
const copyPdfViewerAssets = () => {
  return {
    name: 'copy-pdf-viewer-assets',
    buildStart() {
      /* This runs when the dev server starts or before build */
      const sourceBase = resolve('node_modules/@avanquest/pdf-web-viewer/public');
      const targetBase = resolve('public');

      if (fs.existsSync(sourceBase)) {
        fs.ensureDirSync(targetBase);

        /* Copy required asset folders */
        /* Add 'pwv-dropbox', 'pwv-onedrive', 'pwv-netexplorer' if you enable cloud drives */
        ['pwv-workers', 'pwv-fonts', 'pwv-i18n', 'pwv-stamps', 'pwv-cursors'].forEach((folder) => {
          const src = resolve(sourceBase, folder);
          const dest = resolve(targetBase, folder);
          if (fs.existsSync(src)) {
            fs.copySync(src, dest);
            console.log(`Copied ${folder} to public/${folder}`);
          }
        });
      } else {
        console.warn('PDF Viewer assets directory not found!');
      }
    },
  };
};

export default defineConfig({
  plugins: [copyPdfViewerAssets()],
  /* Serve static assets from public directory (served at the site root) */
  publicDir: 'public',
});
Copy

Step 3: Update your main.js file

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

document.querySelector('#app').innerHTML = `
  <div id="pdf-container" style="width: 100%; height: 100vh;"></div>
`;

/* Add styles for the viewer wrapper and app container */
const style = document.createElement('style');
style.textContent = `
  body {
    margin: 0;
    padding: 0;
  }
  #app {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    max-width: none; /* Override Vite default */
  }
  document-viewer-wrapper {
    display: block;
    width: 100%;
    height: 100%;
  }
`;
document.head.appendChild(style);

/* Initialize the PDF viewer */
const editor = await PdfEditor({
  license: 'YOUR_LICENSE_KEY' /* Replace with your license key */,
  container: document.getElementById('pdf-container'),
});
Copy

Step 4: Run your app

npm run dev
Copy

Open your browser at the URL displayed in the terminal (usually http://localhost:5173).

Deployment Considerations

When deploying your HTML application with PDF Web SDK:

1. Make sure the PDF worker assets are correctly copied to your server
2. Ensure the basePath configuration points to the correct location
3. For production, use a bundler like Vite to optimize your application See Asset Paths for how basePath maps to the deployed pwv-* folders.