ngx-doc-viewer - JavaScript

Introduction

ngx-doc-viewer is a lightweight library for Angular that allows you to display documents in your web application. It supports various document formats including PDF, Microsoft Office documents, and images.

Features

Some of the notable features of ngx-doc-viewer are:

• Support for various document formats.
• Easy to use and integrate into your Angular application.
• Lightweight and fast.
• Customizable using CSS.
• Provides a range of options to control the display of documents.

Installation

You can install ngx-doc-viewer using npm:

npm install --save ngx-doc-viewer

Usage

To use ngx-doc-viewer, you need to import it into your Angular module and add it to your template HTML file. Here's an example:

import { NgModule } from '@angular/core';
import { NgxDocViewerModule } from 'ngx-doc-viewer';

@NgModule({
  declarations: [AppComponent],
  imports: [NgxDocViewerModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

<ngx-doc-viewer [documentUrl]="documentUrl" [options]="options"></ngx-doc-viewer>

options

You can customize the behavior of ngx-doc-viewer by passing options as an input to the component instance. Here are some of the available options:

options = {
  // Height of viewer container
  height: '600px',
  // Enable/disable printing feature
  showPrint: true,
  // Enable/disable download feature
  showDownload: true,
  // Enable/disable fullscreen feature
  fullscreen: true,
  // Enable/disable zooming feature
  zoom: true,
  // Maximum zoom level
  maxZoom: 3,
  // Minimum zoom level
  minZoom: 0.5,
  // Start zoom level.
  initialZoom: 1,
  // Mode of view - full-width, full-height or original size
  mode: 'full-width',
  // Text appear while loading document
  loadingMessage: 'Loading the document. Please wait...'
};

Conclusion

ngx-doc-viewer is a powerful tool for displaying documents in your Angular application. It's easy to use, customizable, and supports various document formats. With ngx-doc-viewer, you can provide a seamless document-viewing experience to your users.