Steps to Integrate Viewer in Angular

Install Viewer

1. Install eViewer 7 Angular CLI library from NPM:

npm i @mstechusa/eviewer7-cli

Launch Viewer

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

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

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.

    this.eViewer_App.loadViewer();

Load Document

1. Set Document endpoint options:

    let viewerServerUrl = '<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);
			
			
    let savingEndPoint = "";
    let viewerServerURL = "";
    const authToken = "";
    const userName = "demo";
    const hideToolBar = false;
    // let savePayloadType = 'application/json';
	let savePayloadType = 'multipart/form-data';
    let options = {
      type: 'GET',
      headers: {
        Authorization: 'Bearer ' + authToken,
        Accept: 'application/octet-stream.',
      },
      savePayLoadType: savePayloadType,
    };
    this.eViewer_App.loadViewer();
    this.eViewer_App.setDocumentEndPointOptions(
      viewerServerURL,
      savingEndPoint,
      userName,
      options,
      hideToolBar
    );
    

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

    let uploadData = {
      repositoryType: 'filesystem',
      docUrl: this.uploadFormDetail.value.docURLs,
      annotationUrl: this.uploadFormDetail.value.annURLs,
      clientDocID: 'client_' + Math.floor(Math.random() * 100),
      dbUsername: this.uploadFormDetail.value.userName,
    };
    this.documentService.loadDocument(uploadData);

Steps to Integrate Viewer in React

1. Install eViewer via NPM using below command:

npm i @mstechusa/eviewer7 –save

2. 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");

Another API to register license needs to be used on response of loadViewer. The license key will be provided by MSTech.

      this.eViewerObj.loadViewer("eviewer", null, null, "bestFit").
      then(() => {
             console.log("loading viewer successfully");
             this.eViewerObj.registerLicense(this.licenseKey);
      });     

3. Load Document.

    let docUrl = "http://www.africau.edu/images/default/sample.pdf";
    let clientDocID = "SOMEUNIQUEID";
    let userName = "USERNAME";
    let options = {
      type: "GET",
      headers: {
        Authorization:
          "Bearer ",
      },
    };

    this.eViewerObj.setDocumentEndPointOptions(options, serverUrl,
    saveUrl, userName);
    let documentSrvc = this.eViewerObj.getDocumentService();
    documentSrvc
        .loadDocument(
           docUrl,
           "",
           clientDocID,
           userName,
           "some-document-description",
           // optional parameter
                {
                   isEditMode: true,
                   repoType: "filesystem",
                   password: "",
                   landingPage: this.state.landingPgNo,
                })
          .then((response) => {
               console.log(response);
         });

Steps to Integrate Viewer in Javascript

1. Add “eViewer7_browser.js” into your webpage.

    let jsElement = document.createElement("script");
    jsElement.type = "application/javascript";
    jsElement.src = './js/eViewer7_browser.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(() => {
          eViewerObj.registerLicense("PROVIDEDBYMST");
    });

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 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, "some-document-description", {isEditMode: true,
      repoType: "fileSystem", password:"", landingPage: 1})
      .then((response) => {
          console.log(response);
    })