https://github.com/ameyb88/file-viewer
A great file viewer for your Angular applications just like Gmail. You can preview PDF, DOCX, XLSX, PNG, JPEG and many more file types!
https://github.com/ameyb88/file-viewer
Last synced: 4 months ago
JSON representation
A great file viewer for your Angular applications just like Gmail. You can preview PDF, DOCX, XLSX, PNG, JPEG and many more file types!
- Host: GitHub
- URL: https://github.com/ameyb88/file-viewer
- Owner: ameyb88
- License: mit
- Created: 2025-07-11T02:01:50.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-07-11T05:44:41.000Z (4 months ago)
- Last Synced: 2025-07-11T08:26:04.356Z (4 months ago)
- Size: 190 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - file-viewer - A powerful, universal file previewer library for Angular applications with support for PDF, images, documents, spreadsheets, and more. (Third Party Components / Viewers)
- awesome-angular - file-viewer - A powerful, universal file previewer library for Angular applications with support for PDF, images, documents, spreadsheets, and more. (Third Party Components / Viewers)
README
# NG Universal File Previewer
A powerful, universal file previewer library for Angular applications with support for PDF, images, documents, spreadsheets, and more.
## ✨ Features
- 📄 **PDF Preview** with page navigation and zoom controls
- 🖼️ **Image Preview** with zoom and full-size view
- 📊 **Excel/CSV** data table preview
- 📝 **Word Document** preview (DOCX)
- 🎨 **Modern UI** with light/dark theme support
- 📱 **Responsive Design** - works on mobile and desktop
- 🔧 **Highly Configurable** with custom processors
- 🚀 **Easy Integration** - just add one component
## Live Demo
- https://ameyb88.github.io/file-viewer/
## 🚀 Quick Start
### Installation
```bash
npm install ng-universal-file-previewer
```
### Import the Module
```typescript
import { NgUniversalFilePreviewerModule } from 'ng-universal-file-previewer';
@NgModule({
imports: [
NgUniversalFilePreviewerModule
]
})
export class AppModule { }
```
### Basic Usage
```html
```
```typescript
export class AppComponent {
previewConfig = {
maxFileSize: 10 * 1024 * 1024, // 10MB
supportedTypes: ['pdf', 'image', 'docx', 'xlsx', 'csv', 'txt'],
autoPreview: true
};
onFileSelected(file: File) {
console.log('File selected:', file.name);
}
onPreviewReady(result: any) {
console.log('Preview ready:', result);
}
}
```
## 📖 Documentation
### Supported File Types
- **PDF**: Full rendering with page navigation and zoom
- **Images**: PNG, JPEG, GIF, WebP, SVG
- **Documents**: DOCX (with full content rendering)
- **Spreadsheets**: XLSX, XLS, CSV
- **Text**: TXT, JSON, HTML, XML
### Configuration Options
```typescript
interface FilePreviewConfig {
maxFileSize: number; // Maximum file size in bytes
supportedTypes: FileType[]; // Array of supported file types
autoPreview: boolean; // Auto-generate preview on file selection
showFileInfo: boolean; // Show file information panel
}
```
### Theming
The library supports both light and dark themes:
```html
```
### Custom Styling
Add custom CSS classes:
```html
```
## 🔧 Advanced Usage
### Custom File Processors
```typescript
import { FileProcessorService } from 'ng-universal-file-previewer';
constructor(private fileProcessor: FileProcessorService) {
// Register custom processor for a file type
this.fileProcessor.registerCustomProcessor('custom', async (file: File) => {
return '
Custom preview content';
});
}
```
## 📦 Dependencies
- `@angular/core` (^17.0.0)
- `@angular/common` (^17.0.0)
- `pdfjs-dist` (^3.4.120)
- `mammoth` (^1.6.0)
- `xlsx` (^0.18.5)
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📄 License
MIT License - see LICENSE file for details.
## 🐛 Issues
Report issues on [GitHub Issues](https://github.com/yourusername/ng-universal-file-previewer/issues)