Vite SDK Integration

This guide demonstrates a complete PDF processing workflow using vanilla JavaScript and Vite:

Opens a PDF file from user input
Deletes the first page
Saves the modified document
Downloads the result automatically
Properly manages memory by closing documents after processing

The example shows a simple vanilla JavaScript implementation with minimal styling and direct PDF SDK integration.

Component

Update main.js:

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

document.querySelector('#app').innerHTML = `
  <div style="padding: 40px; text-align: center;">
    <h1>PDF Web SDK Demo</h1>
    <div style="background: #f9f9f9; padding: 30px; border-radius: 12px; display: inline-block;">
      <input 
        type="file" 
        id="fileInput" 
        accept=".pdf" 
        style="margin-bottom: 20px; padding: 10px;"
      />
      <div id="status"></div>
    </div>
  </div>
`;

const updateStatus = (message) => {
  document.getElementById('status').textContent = message;
};

function downloadFile(file, fileName) {
  const blob = new Blob([file], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const a = Object.assign(document.createElement('a'), {
    href: url,
    download: fileName,
  });

  a.click();
  URL.revokeObjectURL(url);
}

let openDocuments = [];

async function initPdfSdk() {
  await PdfSdk.initialize({
    license: import.meta.env.VITE_PDF_LICENSE_KEY || 'YOUR_LICENSE_KEY',
    workerPath: '/workers',
  });
}

function handleUnload() {
  if (openDocuments.length) {
    /* In a real app, you'd want to track document instances and close them */
    /* For this demo, we'll just clear the array */
    openDocuments.length = 0;
  }
}

async function handleFileInputChange(e) {
  const file = e.target.files?.[0];
  if (!file) return;

  try {
    const doc = await PdfSdk.openDocument({ file });
    openDocuments.push(doc);

    /* Example operation: get page count */
    const pageCount = doc.getNumPages();
    console.log(`Document has ${pageCount} pages`);

    const savedFile = await doc.exportDocument({ as: 'uint8array' });

    if (savedFile) downloadFile(savedFile, file.name);

    await doc.dispose();
    openDocuments = openDocuments.filter((d) => d !== doc);

    updateStatus('✅ PDF processed successfully');
  } catch (err) {
    console.error('Error during PDF processing:', err);
    updateStatus('❌ Failed to process PDF');
  }
}

initPdfSdk();

document.getElementById('fileInput')?.addEventListener('change', handleFileInputChange);

window.addEventListener('beforeunload', handleUnload);

App Integration

Update index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF Web Viewer Vite Integration</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Running

Start development server:

npm run dev

Open browser at http://localhost:5173.

Vite SDK Integration

Component

App Integration

Running

Settings

On This Page