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

  npm install ngx-word-viewer
  

or with yarn

yarn add ngx-word-viewer

Quick Start

1. Import the Module (Module-based apps)

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+)

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

<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

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

(HTML)
<input type="file" (change)="onFileSelected($event)" accept=".docx">
<ngx-word-viewer [src]="documentSource"></ngx-word-viewer>

(TypeScript)
onFileSelected(event: any): void {
  const file = event.target.files[0];
  if (file && file.name.endsWith('.docx')) {
    this.documentSource = file;
  }
}

Loading from URL

export class AppComponent {
  documentSource = 'https://example.com/documents/sample.docx';
}

Custom Toolbar Configuration

<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:

/* 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

// 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 [email protected] or open an issue on GitHub.

Authors

• @abhishekRout