NgxUniversalFileViewer

A powerful and versatile Angular component for viewing multiple file formats including PDF, Word (DOC/DOCX), Excel (XLS/XLSX), and PowerPoint (PPT/PPTX) files with both continuous scroll and page-by-page view modes.

✨ Features

• 📄 PDF Viewer - Full-featured PDF viewing with zoom, rotation, navigation
• 📝 Word Documents - Display DOC and DOCX files with proper formatting
• 📊 Excel Spreadsheets - View XLS and XLSX files with sheet navigation
• 📽️ PowerPoint Presentations - View PPT and PPTX slides
• 🔄 Dual View Modes - Toggle between continuous scroll and page-by-page view
• 🎨 Customizable Toolbar - Configure which controls to display
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• 🔍 Auto File Type Detection - Automatically detects file type from extension
• 🌐 SSR Compatible - Works with Angular Universal
• 💪 TypeScript Support - Fully typed for better development experience

📦 Installation

Step 1: Install the package

npm install ngx-universal-file-viewer

Or Using Yarn:

yarn add ngx-universal-file-viewer

🚀 Getting Started For Angular 14+ (Standalone Components)

import { Component } from '@angular/core';
import { NgxUniversalFileViewerComponent   } from 'ngx-universal-file-viewer';

@Component({
  selector: 'app-document-viewer',
  standalone: true,
  imports: [NgxUniversalFileViewerComponent],
  template: `
    <ngx-universal-file-viewer
      [src]="fileUrl"
      [fileType]="'auto'"
      [viewMode]="'continuous'">
    </ngx-universal-file-viewer>
  `
})
export class DocumentViewerComponent {
  fileUrl = 'assets/sample.pdf';
}

For Angular 12-13 (Module-based)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUniversalFileViewerComponent  } from 'ngx-universal-file-viewer';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxUniversalFileViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

📖 Basic Usage Simple Implementation

<ngx-universal-file-viewer
  [src]="fileUrl"
      [fileType]="'auto'"
      [viewMode]="'continuous'"
      [showToolbar]="true"
      >
</ngx-universal-file-viewer>

TypeScript

export class AppComponent {
  fileUrl = 'https://example.com/document.pdf';
}

With All Options

<ngx-universal-file-viewer
  [src]="fileSource"
  [fileType]="fileType"
  [viewMode]="viewMode"
  [showToolbar]="showToolbar"
  [viewerConfig]="viewerConfig"
  [toolbarConfig]="toolbarConfig"
  (onLoad)="handleLoad($event)"
  (onError)="handleError($event)"
  (pageChange)="handlePageChange($event)"
  (viewModeChange)="handleViewModeChange($event)">
</ngx-universal-file-viewer>

📱 Mobile Support

The viewer is fully responsive and works on mobile devices:

Touch gestures for scrolling

Pinch to zoom (PDF)

Responsive toolbar

Optimized for small screens

🔒 Security

Sanitizes HTML content for Word documents

Validates file types

Secure handling of file sources

No external dependencies for sensitive operations

🐛 Troubleshooting

Issue: PDF not loading

Solution: Ensure PDF.js is properly loaded:

🙏 Acknowledgments

PDF.js - PDF rendering

Mammoth.js - Word document conversion

SheetJS - Excel file processing

📞 Support

For support, email [email protected]..