NocoBase Plugin: File Previewer - PDF.js

A NocoBase plugin that provides comprehensive PDF file preview functionality using PDF.js library with advanced viewing controls.

Features

• 📄 PDF File Preview - High-quality PDF rendering with PDF.js
• 📑 Page Navigation
  • Previous/Next page buttons
  • Direct page number input
  • Page counter display
• 🔍 Zoom Controls
  • Zoom in/out buttons
  • Zoom level selector (50%, 75%, 100%, 125%, 150%, 200%, 250%, 300%)
  • Fit to width/page buttons
• 🔄 Rotate Controls
  • Rotate left (counter-clockwise)
  • Rotate right (clockwise)
  • Support 0°, 90°, 180°, 270° rotation
• 🔎 Text Search
  • Real-time text search with highlighting
  • Navigate through matches (previous/next)
  • Match counter showing current position
  • Case-insensitive search
  • Yellow highlight for all matches, orange for current match
• ⬇️ Download PDF Files - Save PDF files to local storage
• 🌐 Internationalization - Full support for English and Chinese (简体中文)
• 🎨 Professional UI - Dark background viewer with intuitive toolbar
• 📱 Responsive Design - Works on various screen sizes

Installation

Simply install the plugin:

npm install @gemvn90/plugin-file-previewer-pdfjs

That's it! All dependencies (pdfjs-dist, react-pdf, file-saver) are bundled with the plugin. No additional installation required.

Worker Configuration: The PDF.js worker is automatically configured using a Blob URL approach:

1. Fetch from CDN: Worker downloaded from https://cdnjs.cloudflare.com/ajax/libs/pdf.js/{version}/pdf.worker.min.js
2. Create Blob URL: Convert response to Blob and create blob:// URL
3. Set Worker Source: Configure pdfjs to use Blob URL

Why Blob URL?

• ✅ Prevents AMD/RequireJS from intercepting the URL
• ✅ AMD won't add .js extension to blob URLs
• ✅ Works reliably in NocoBase's AMD environment
• ✅ Overrides react-pdf's default worker setting
• ✅ No 404 errors for local worker files

This approach solves AMD module resolution conflicts in NocoBase's environment.

Usage

Once installed, the plugin automatically registers a PDF previewer for all PDF files in NocoBase attachment fields.

Viewer Controls

The PDF viewer includes a comprehensive toolbar with the following controls:

Page Navigation:

• Click Previous/Next buttons or use the page number input to navigate
• Direct page jump by entering page number

Zoom:

• Use zoom in/out buttons for quick adjustments
• Select specific zoom level from dropdown (50% - 300%)
• Use "Fit to width" or "Fit to page" for automatic sizing

Rotate:

• Rotate document left or right in 90° increments

Search:

• Click the search button to open search bar
• Enter text to search within the PDF document
• Use Previous/Next buttons to navigate through matches
• Press Enter to jump to next match
• All matches are highlighted in yellow, current match in orange
• Match counter shows your position (e.g., "2 / 5")

Download:

• Download the PDF file to your local storage

Development

Build

npm run build

Package

npm pack

Dependencies

All dependencies are bundled with the plugin:

• react-pdf: ^10.2.0 (includes pdfjs-dist 5.4.296)
• file-saver: ^2.0.5

Note: All PDF-related libraries are bundled into the plugin for maximum compatibility with NocoBase's AMD environment.

Changelog

v1.0.3

• Major Improvement: Simplified installation - single command installation
• react-pdf and file-saver are now bundled into the plugin
• All PDF-related dependencies included in bundle for AMD compatibility
• Fixed "Script error for react-pdf" by bundling instead of externalizing
• Worker CDN: Switched from cdnjs to unpkg (cdnjs doesn't have PDF.js 5.x)
• Worker URL: Verified and using .mjs format (only format available on unpkg)
• Worker Loading: Using Blob URL approach to prevent AMD/RequireJS interception
• AMD Compatibility: Fetch worker from CDN, convert to Blob URL to avoid module resolution conflicts
• Worker Timing: Moved worker configuration into component useEffect
• Added error handling for worker setup in AMD environment
• CDN Validation: All CDN URLs verified and working correctly

v1.0.2

• Simplified Installation: react-pdf and file-saver now included as dependencies (auto-installed)
• Breaking Change: Updated react-pdf from 7.7.3 to 10.2.0 (includes pdfjs-dist 5.4.296)
• Worker Configuration: Worker loaded from cdnjs CDN (compatible with NocoBase AMD environment)
  • Worker version automatically matched with pdfjs-dist version
  • ES modules format (.mjs) for PDF.js 5.x compatibility
• Externalized react-pdf and pdfjs-dist (no longer bundled) - reduces bundle size from 930kB to 31.6kB
• No manual dependency installation required - everything installs automatically
• Fixed "Cannot set properties of undefined (setting 'onPull')" error by using CDN worker
• Improved compatibility with NocoBase AMD module system
• All features working: Page navigation, Zoom, Rotate, Text Search, Download

v1.0.1

• Added text search functionality
• Added comprehensive toolbar with zoom, rotate controls
• Enhanced UI/UX

License

AGPL-3.0

Author

NocoBase Plugin Development