Angular Document, Image, and Audio/Video Viewer Library

A versatile Angular library for viewing documents, images, and audio/video files directly within your Angular application. This library supports a variety of file types and offers customizable configurations.

Features

• Document Viewer: Supports public and private documents using Google, Office, PDF, and Mammoth viewers.
• Image Viewer: Displays images with customizable buttons, zoom functionality, and keyboard navigation.
• Audio/Video Viewer: Simple and efficient way to embed and play audio or video files.

Installation

Install the library via npm:

npm install @mindbowser_inc/ng-ineers-file-viewer --save

Getting Started

1. Import Modules Add the necessary modules to your app module:

import { DocViewerModule, ImageViewerModule, AudioVideoViewer } from '@mindbowser_inc/ng-ineers-file-viewer';

@NgModule({
  imports: [
    DocViewerModule,
    ImageViewerModule,
    AudioVideoViewer
  ],
})
export class AppModule {}

2. Usage Document Viewer To display a document:

<doc-viewer
  [url]="docUrl"
  viewer="google"
  style="width:100%;height:50vh;">
</doc-viewer>

Inputs:

url: The document URL. viewer: Choose from 'google' (default), 'office', 'mammoth', 'pdf', or 'url'. Image Viewer To display images:

<image-viewer [src]="imageUrls" [(index)]="currentIndex"></image-viewer>

Optional Configuration:

const config = {
  btnClass: 'default',
  zoomFactor: 0.1,
  allowFullscreen: true,
  allowKeyboardNavigation: true,
  btnIcons: {
    zoomIn: 'fa fa-plus',
    zoomOut: 'fa fa-minus',
    next: 'fa fa-arrow-right',
    prev: 'fa fa-arrow-left',
    fullscreen: 'fa fa-arrows-alt',
  }
};

Audio/Video Viewer To display audio:

<audio-video-viewer [url]="audioUrl" viewer="audio"></audio-video-viewer>

To display video:

<audio-video-viewer [url]="videoUrl" viewer="video"></audio-video-viewer>

File Type Support

Public Document Viewer

Google Viewer:

Supports .doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf.

Office Viewer:

Supports .doc, .docx, .xls, .xlsx, .ppt, .pptx.

Image Viewer

Supports all standard image formats including .jpg, .jpeg, .png, .gif. Audio/Video Viewer

Audio Video Viewer

Supports standard audio formats like .mp3, .wav and video formats like .mp4, .avi.

Blob Support with Mammoth

For viewing .docx files from blob using Mammoth, you can directly use the convertToHtml function integrated into the package.

For .docx files, install Mammoth:

npm install mammoth --save

Include mammoth.browser.min.js in angular.json:

"scripts": [
  "node_modules/mammoth/mammoth.browser.min.js"
]

Example Usage:

<doc-viewer
  viewer="mammoth"
  [url]="blobUrl"
  style="width:100%;height:50vh;">
</doc-viewer>

Custom Viewer Example For external document viewers:

<doc-viewer
  [viewerUrl]="'https://docs.google.com/gview?url=%URL%&embedded=true'"
  [url]="'https://example.com/sample.doc'"
  viewer="url"
  style="width:100%;height:50vh;">
</doc-viewer>

Contributions are welcome! Please open an issue or submit a pull request with your improvements or suggestions.