ngx-universal-file-viewer
Version:
A powerful Angular component for viewing PDF, Word, Excel, and PowerPoint files with continuous scroll and page-by-page view modes. Supports Angular 12+
144 lines (115 loc) ā¢ 4.12 kB
Markdown
[](https://www.npmjs.com/package/ngx-universal-file-viewer)
[](https://opensource.org/licenses/MIT)
[](https://angular.io/)
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
```bash
npm install ngx-universal-file-viewer
```
#### Or Using Yarn:
```bash
yarn add ngx-universal-file-viewer
```
š Getting Started
For Angular 14+ (Standalone Components)
```bash
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
[]="fileUrl"
[]="'auto'"
[]="'continuous'">
</ngx-universal-file-viewer>
`
})
export class DocumentViewerComponent {
fileUrl = 'assets/sample.pdf';
}
```
For Angular 12-13 (Module-based)
```bash
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
```bash
<ngx-universal-file-viewer
[]="fileUrl"
[]="'auto'"
[]="'continuous'"
[]="true"
>
</ngx-universal-file-viewer>
```
TypeScript
```bash
export class AppComponent {
fileUrl = 'https://example.com/document.pdf';
}
```
With All Options
```bash
<ngx-universal-file-viewer
[]="fileSource"
[]="fileType"
[]="viewMode"
[]="showToolbar"
[]="viewerConfig"
[]="toolbarConfig"
(onLoad)="handleLoad($event)"
(onError)="handleError($event)"
(pageChange)="handlePageChange($event)"
(viewModeChange)="handleViewModeChange($event)">
</ngx-universal-file-viewer>
```