Steps to Integrate Viewer in Angular

Install Viewer

1. Install eViewer 7 Angular CLI library from NPM:

npm i @mstechusa/eviewer7-prod-lib

Launch Viewer

1. Import eViewerApp class from eViewer7-prod-lib.

  import { eViewerApp } from '@mstechusa/eviewer7-prod-lib';

2. Incorporate into your app component class constructor and subscribe to the isViewerLoaded observable in the components constructor or ngOnInit event.

    constructor(
   private eViewer_App: eViewerApp
    ) {
   this.subscription = this.eViewer_App.isViewerLoaded.subscribe((value)=>{
    });
  }

3. Incorporate eViewer7 lib’s selector into the template html.

    <div *ngIf='isViewerLoad'>
    <lib-eviewer-lib></lib-eviewer-lib>

4. Import the following services:

    import {
    DocumentService,
    EditingService,
    eViewerApp,
    ViewerPreferenceService,
    AnnotationService,
    StatusService,
} from '@mstechusa/eviewer7-prod-lib';

5. Incorporate the services in the components or service class constructor.

    constructor(
    private eViewer_App: eViewerApp,
    private viewer_preference: ViewerPreferenceService,
    private documentService: DocumentService,
    private editingService: EditingService,
    private annotationService: AnnotationService,
    private stService: StatusService
      ) {}

6. Invoke loadViewer API.

    let serverEndPoint = '<URL to eViewer server app>';
    // If server is self-hosted then http://ip:port/api/v1
    // If server is hosted on a app server then
'http://<ip>:<port>/<contextname>/api/v1'
   let userName = 'demouser'; //
   let viewerUrl = '<url to viewer i.e http://<ip>:<port>/<contextname>';

   this.eViewer_App.loadViewer(
       serverEndPoint,
       '', // NA
       '', // NA
       '', // NA
       userName,
       viewerUrl
    );

Load Document

1. Set Document endpoint options:

    let serverUrl = '<url to endpoint where document and annotation data will
                 be posted on save>';
    let options = {
      type: 'GET',
      headers: {
        Authorization:
          'Bearer <optional token if API is secured>',
      },
    };

    this.eViewer_App.setDocumentEndPointOptions(
            options, 
            serverEndPoint, 
            saveUrl, 
            userName);
    

2. Create an object with document details as shown below:

    let uploadData = {
      repositoryType: 'filesystem',
      docUrl: '<url to a document>',
      viewerUrl: '<url to viewer i.e http://<ip>:<port>/<contextname>',
      annotationUrl: '',
      clientDocID : ' ',
      dbUsername: '',
    };

    this.documentService.loadDocument(uploadData);

Steps to Integrate Viewer in React

1. Install eViewer via NPM using below command:

npm i @mstechusa/eviewer7 –save

2. Copy Assets: Copy assets and resources to your public or static folder. These assets need to be served with your application.
For example:
If your project is built into a ‘dist’ folder, you could copy these assets into ‘dist’ or public. The folder you need to copy is ‘node_modules/@mstechusa/eviewer7/assets’.

3. Import and Instantiate eViewer.

      import eViewerApp from "eviewer7/js/eViewer7 v1.0.7";
      this.eViewerObj = new eViewerApp();
      this.eViewerObj.loadViewer("viewer", null, null).then(() => {
      });
      await import("@mstechusa/eviewer7/scripts");
      await import("@mstechusa/eviewer7/runtime");
      await import("@mstechusa/eviewer7/polyfills");
      await import("@mstechusa/eviewer7/main");
      await import("@mstechusa/eviewer7/js/events");

4. Load Document.

    let docUrl = "http://www.africau.edu/images/default/sample.pdf";
    let saveUrl = "";
    let serverUrl = "";
    let annotationUrl = "";
    let clientDocID = "<optional document ID>"; 
    let userName = "demouser";
    let isEditMode = true;
    let repoType = "filesystem";
    let fileName = "";
    let password = "";
    let options = {
      type: "GET",
      headers: {
        Authorization:
          "Bearer ",
      },
    };

    this.eViewerObj.setDocumentEndPointOptions(options, serverUrl,
    saveUrl, userName);
    let documentSrvc = this.eViewerObj.getDocumentService();
    documentSrvc
      .loadDocument(
        docUrl,
        annotationUrl,
        clientDocID,
        userName,
        isEditMode,
        repoType,
        password,
        fileName
      )
     .then((response) => {
     console.log("Document laoded");
    });

Steps to Integrate Viewer in Javascript

1. Add “eViewer7 v1.0.xx.js” into your webpage.

    let jsElement = document.createElement("script");
    jsElement.type = "application/javascript";
    jsElement.src = './js/eViewer7 v1.0.8.js';
    jsElement.addEventListener('load', function () {
  
    });
    document.getElementsByTagName("head")[0].appendChild(jsElement);

2. Load viewer related JS & CSS files into your web page.

  let eViewerObj = new eViewerApp();
    var css = [{ href: './viewer/styles.css' },
         {
          href:'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css',
          integrity:'sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vN
          fzsWfV28IaLL3i96P9sdNyeRssA=',
          crossorigin: 'anonymous' }
          ];
    var scripts = [
            './viewer/runtime.js',
            './viewer/polyfills.js',
            './viewer/scripts.js',
            './viewer/main.js',
            './js/events.js',
    ];
    eViewerObj.loadViewer("viewer", scripts, css).then(() => {
    });

3. Set Document Endpoint’s and load document.

    let docUrl = "http://somedummyurl/sample.pdf";
    let saveUrl = "http://somedummyurl/saveDocument";
    let serverUrl = "http://somedummyurl/eViewerServer-0.0.29/api/v1";
        //   [optional, if eViewer server is deployed]
    let annotationUrl = "http://somedummyurl/sampleann.json";
    let clientDocID = "<optional document ID>";
    let userName = "demo";
    let isEditMode = true;
    let repoType = "filesystem";
    let fileName = "sample";
    let password = "";
    let token = "XXX";
    let options = {
    type: 'GET',
    headers: {Authorization: 'Bearer ' + token,
    Accept: 'application/octet-stream.'}
     };
    eViewerObj.setDocumentEndPointOptions(options, saveUrl);
    let documentSrvc = eViewerObj.getDocumentService();
      documentSrvc.loadDocument(docUrl, annotationUrl, clientDocID
      userName, isEditMode, repoType, password, fileName)
      .then((response) => {
      console.log(response);
    })