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.

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 = '';
    let options = {
      type: 'GET',
      headers: {
        Authorization:
          'Bearer',
      },
    };
    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,
      tabStyle: {
        fileName: 'some-document-description-OUTFOCUS',
      },
      focusTabStyle: {
        fileName: 'some-document-description-INFOCUS',
      },    
    };
    this.documentService.loadDocumentWithOptions(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.

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

    import eViewerApp from "@mstechusa/eviewer7/js/eViewer7";
    const eViewerObj = new eViewerApp(userName);
    eViewerObj.loadViewer("eviewer", null, null, "bestFit", options).then(() => {
            console.log("loading viewer successfully");
            this.eViewerObj.registerLicense(this.licenseKey);
        });
    await import("@mstechusa/eviewer7/styles.css");
    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");

3. Load Document.

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

    const serverUrl = "https://localhost:8086/api/v1";
    const saveUrl = "some endpoint, over which viewer will post the data when saved"; //optional
    this.eViewerObj.setDocumentEndPointOptions(options, serverUrl, saveUrl, userName);
    let documentSrvc = this.eViewerObj.getDocumentService();
    documentSrvc
        .loadDocumentWithOptions(
           docUrl,
           "",
           clientDocID,
           // optional parameter's
                {
                   isEditMode: true,
                   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 = "https://somedummyurl/sample.pdf";
    let saveUrl = "https://somedummyurl/saveDocument";
    let serverUrl = "https://somedummyurl/eViewerServer-0.0.29/api/v1";
        //   [optional, if eViewer server is deployed]
    let annotationUrl = "https://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.loadDocumentWithOptions(docUrl, annotationUrl, clientDocId,
      userName,
      {
        isEditMode: true,
        repoType: "fileSystem",
        password:"",
        landingPage: 1,
        tabStyle: {
          fileName: 'some-document-description-OUTFOCUS',
        },
        focusTabStyle: {
          fileName: 'some-document-description-INFOCUS',
        },      
      })
      .then((response) => {
          console.log(response);
    })