MssDocViewer

This is an Angular library, developed by MSS development team, that allows you to view documents of different MIME types such as PDF, DOCX, PPTX, XLSX, and more. It provides an easy-to-use component that can be integrated into your Angular application to display and navigate through the document.

Installation

To install the library, simply run the following command:

``bash npm i mss-doc-viewer`

`Usage`

To use the library, you need to import the MssDocViewerModule into your Angular application's module.

`ts import { MssDocViewerModule } from 'mss-doc-viewer';

@NgModule({ declarations: [/ Your app's declarations /], imports: [ BrowserModule, MssDocViewerModule, / Other modules / ], providers: [/ Your app's providers /], bootstrap: [/ Your app's bootstrap component /] }) export class AppModule { }`

Once the MssDocViewerModule module is imported, you can use the components provided by this library in your templates and components. Here is an example of using the MssDocViewerComponent component in a template:

`html`

In the above example, the documents input property of the MssDocViewerComponent is bound to the documents property in the component. This will load and display the documents located at the specified URLs.

`Components`

This library provides the following components for building document viewers:

- MssDocViewerComponent: Renders a dynamic viewer based on an array of field definitions.

`Field Definitions`

To create a dynamic viewer using this library, you need to define an Array of field definitions. Each field definition is an object that describes a single document, including its url, authorization, queryParams, download, print and other properties.

`ts export class Document { url: string = ""; onLoad?: (payload: any) => void; authorization?: string queryParams?: string | ''; viewerUrl?: string | ''; disableContent?: 'none' | 'all' | 'popout' | 'popout-hide' = 'none'; googleCheckContentLoaded?: boolean = true; overrideLocalhost?: string = ''; viewer?: string | 'google' | 'office'; googleCheckInterval?:number=3000; googleMaxChecks?:number=5; download?:boolean; print?:boolean }`

Here is an example of a documents Array:

`ts documents: Document[] = [ { url: 'document_uri', authorization: 'authorization_header', download: true, print: true }, { url: 'document_uri' }, { url: 'document_uri', download: true }, { url: 'document_uri', download: true, print: true }, ]``

Supported MIME Types

- application/*
- image/*
- XML files

Contributing

Contributions to this library are welcome. If you find a bug or have a feature request, please open an issue on the GitHub repository. If you want to contribute code, please fork the repository and create a pull request. Before creating a pull request, please make sure to run the tests and ensure that your code follows the project's coding guidelines.

Usage

To use the library, you need to import the MssDocViewerModule into your Angular application's module.

ts
import { MssDocViewerModule } from 'mss-doc-viewer';

@NgModule({
  declarations: [/ Your app's declarations /],
  imports: [
    BrowserModule,
    MssDocViewerModule,
    / Other modules /
  ],
  providers: [/ Your app's providers /],
  bootstrap: [/ Your app's bootstrap component /]
})
export class AppModule { }

Once the MssDocViewerModule

 module is imported, you can use the components provided by this library in your templates and components. Here is an example of using the

MssDocViewerComponent component in a template:

html

In the above example, the documents input property of the MssDocViewerComponent is bound to the documents property in the component. This will load and display the documents located at the specified URLs.

Field Definitions

To create a dynamic viewer using this library, you need to define an Array of field definitions. Each field definition is an object that describes a single document, including its url, authorization, queryParams, download, print and other properties.

ts
export class Document {
    url: string = "";
    onLoad?: (payload: any) => void;
    authorization?: string
    queryParams?: string | '';
    viewerUrl?: string | '';
    disableContent?: 'none' | 'all' | 'popout' | 'popout-hide' = 'none';
    googleCheckContentLoaded?: boolean = true;
    overrideLocalhost?: string = '';
    viewer?: string | 'google' | 'office';
    googleCheckInterval?:number=3000;
    googleMaxChecks?:number=5;
    download?:boolean;
    print?:boolean
}

Here is an example of a documents Array:

ts
  documents: Document[] = [
    {
      url: 'document_uri',
      authorization: 'authorization_header',
      download: true,
      print: true
    },
    {
      url: 'document_uri'
    },
    {
      url: 'document_uri',
      download: true
    },
    {
      url: 'document_uri',
      download: true,
      print: true
    },
  ]

Contributing