ngx-word-viewer/README.md

Angular component for viewing Word documents (.docx) with page navigation, zoom.

A powerful Angular component for viewing Microsoft Word documents (.docx) in your Angular applications. Similar to ngx-pdf-viewer but for Word documents!

## ✨ Features

- 📄 **Page-by-page navigation** - Navigate through documents page by page
- 🔍 **Zoom controls** - Zoom in/out with preset levels (50% to 200%)
- 📱 **Responsive design** - Works on desktop and mobile devices
- 🖨️ **Print support** - Print documents directly from the viewer
- 💾 **Download as HTML** - Export documents as HTML files
- 🎨 **A4 page layout** - Professional A4 page formatting
- 🚀 **Easy integration** - Simple to integrate with existing Angular projects
- 📊 **Multiple source types** - Support for File, ArrayBuffer, URL, and Base64
- 🎯 **TypeScript support** - Fully typed for better development experience


## Installation


```bash
  npm install ngx-word-viewer
  
```
or with yarn
```bash
yarn add ngx-word-viewer

```
Quick Start

1. Import the Module (Module-based apps)
```bash
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxWordViewerModule } from 'ngx-word-viewer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxWordViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
For Standalone Components (Angular 16+)
```bash
import { Component } from '@angular/core';
import { WordViewerComponent } from 'ngx-word-viewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WordViewerComponent],
  template: `
    <ngx-word-viewer 
      [src]="documentSource"
      [showToolbar]="true">
    </ngx-word-viewer>
  `
})
export class AppComponent {
  documentSource = 'path/to/document.docx';
}
```
📖 Basic Usage
Simple Example
```bash
<ngx-word-viewer 
  [src]="documentSource"
  [showToolbar]="true"
  [pageHeight]="1000"
  [initialZoom]="1"
  (onDocumentLoad)="onDocumentLoad($event)"
  (onError)="onError($event)"
  (pageChange)="onPageChange($event)">
</ngx-word-viewer>
```
Component TypeScript
```bash 
export class AppComponent {
  documentSource: string | File | ArrayBuffer | null = null;

  onFileSelected(event: any): void {
    const file = event.target.files[0];
    if (file) {
      this.documentSource = file;
    }
  }

  onDocumentLoad(event: any): void {
    console.log('Document loaded:', event);
  }

  onError(error: string): void {
    console.error('Error loading document:', error);
  }

  onPageChange(page: number): void {
    console.log('Current page:', page);
  }
}
```
💡 Examples
Loading from File Input
```bash
(HTML)
<input type="file" (change)="onFileSelected($event)" accept=".docx">
<ngx-word-viewer [src]="documentSource"></ngx-word-viewer>
```
```bash
(TypeScript)
onFileSelected(event: any): void {
  const file = event.target.files[0];
  if (file && file.name.endsWith('.docx')) {
    this.documentSource = file;
  }
}
```
Loading from URL
```bash
export class AppComponent {
  documentSource = 'https://example.com/documents/sample.docx';
}
```
Custom Toolbar Configuration
```bash
<ngx-word-viewer 
  [src]="documentSource"
  [showToolbar]="true"
  [showPageHeader]="true"
  [showPageFooter]="true"
  [fileName]="'My Custom Document'"
  [initialZoom]="1.5">
</ngx-word-viewer>
```
🎨 Styling
The component uses ViewEncapsulation.None, so you can override styles globally:
```bash
/* Custom toolbar styling */
.word-viewer-toolbar {
  background: #your-color !important;
}

/* Custom page styling */
.a4-page {
  box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
}

/* Custom content styling */
.page-content {
  font-family: 'Your Font', serif !important;
}
```

🔧 Advanced Configuration
Custom Page Dimensions
```bash
// For Letter size pages
<ngx-word-viewer 
  [src]="documentSource"
  [pageHeight]="1056">  <!-- Letter size height -->
</ngx-word-viewer>
```


## Acknowledgements



🙏 Credits
Built with ❤️ using:

Mammoth.js for DOCX to HTML conversion
Angular
📞 Support
For support, email abhishekrout128@gmail.com or open an issue on GitHub.


## Authors

- [@abhishekRout](https://github.com/Imishu29)