Copy Required Assets

The PDF Web Viewer requires static assets (workers, fonts, translations, stamps). For React 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 react from '@vitejs/plugin-react';
   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: [react(), 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

import { useEffect, useRef } from 'react';
import { PdfEditor } from '@avanquest/pdf-web-viewer';

const PdfViewerWithUI = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const initEditor = async () => {
      if (!containerRef.current) return;

      try {
        const editor = await PdfEditor({
          container: containerRef.current /* 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);
      }
    };

    initEditor();
  }, []);

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
    </div>
  );
};

export default PdfViewerWithUI;
Copy