Vue.js SDK Integration

This guide demonstrates a complete PDF processing workflow using Vue 3 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 Vue component with minimal styling and direct PDF SDK integration.

Component

Create src/components/PdfViewer.vue:

<template>
  <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" @change="handleFileInputChange" accept=".pdf" style="margin-bottom: 20px; padding: 10px;" />
      <div>{{ status }}</div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { PdfSdk } from '@avanquest/pdf-web-viewer/sdk';

  const status = ref('');
  const isInitialized = ref(false);
  const openDocuments = ref([]);

  const updateStatus = (message) => {
    status.value = message;
  };

  const 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);
  };

  const initPdfSdk = async () => {
    try {
      await PdfSdk.initialize({
        license: import.meta.env.VITE_PDF_LICENSE_KEY || 'YOUR_LICENSE_KEY',
        workerPath: import.meta.env.VITE_WORKER_PATH || '/workers',
      });
      isInitialized.value = true;
    } catch (error) {
      console.error('Error initializing PDF SDK:', error);
      updateStatus('Failed to initialize PDF SDK');
    }
  };

  const handleUnload = async () => {
    for (const doc of openDocuments.value) {
      await doc.dispose();
    }
    openDocuments.value = [];
  };

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

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

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

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

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

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

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

  onMounted(async () => {
    await initPdfSdk();
  });

  onUnmounted(() => {
    handleUnload();
  });
</script>
Copy

App Integration

Update src/App.vue:

<template>
  <div>
    <h1>PDF Web Viewer Vue.js Integration</h1>
    <PdfViewer />
  </div>
</template>

<script setup>
  import PdfViewer from './components/PdfViewer.vue';
</script>
Copy

Running

Start development server:

npm run dev
Copy

Open browser at http://localhost:5173.