Copy Required Assets

The PDF Web Viewer requires static assets (workers, fonts, translations, stamps). For Vue.js with Vite, configure automatic asset copying:

1. Install fs-extra:

   npm install fs-extra --save-dev
   Copy

2. Create or update vite.config.js:

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import { resolve } from 'path';
   import fs from 'fs-extra';
   
   const copyPdfViewerAssets = () => {
     return {
       name: 'copy-pdf-viewer-assets',
       buildStart() {
         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 */
           ['pwv-workers', 'pwv-fonts', 'pwv-i18n', 'pwv-stamps'].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: [vue(), copyPdfViewerAssets()],
     server: {
       publicDir: 'public',
     },
   });
   Copy

Note: This plugin automatically copies all PDF Web Viewer assets during development and build. The assets will be available at /pwv-workers/, /pwv-fonts/, etc.

Simple Example

<template>
  <div style="width: 100%; height: 100vh;">
    <div ref="pdfContainer" style="width: 100%; height: 100%;"></div>
  </div>
</template>

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

  const pdfContainer = ref(null);

  onMounted(async () => {
    if (!pdfContainer.value) return;

    try {
      const editor = await PdfEditor({
        container: pdfContainer.value, /* Provide container for UI */
        license: import.meta.env.VITE_PDF_LICENSE_KEY || 'YOUR_LICENSE_KEY',
        workerPath: import.meta.env.VITE_WORKER_PATH || '/workers',
      });

      /* Access the UI service if needed */
      const pdfWebService = editor.ui.pdfWebService;

      /* Optionally open a document programmatically */
      /* await pdfWebService.openDocument(fileObject); */
    } catch (error) {
      console.error('Failed to initialize PDF Editor:', error);
    }
  });
</script>
Copy