Steps to Integrate Viewer in Angular

Install Viewer

1. Install npm i @mstechusa/eviewer7 in your angular project from npm.

npm i @mstechusa/eviewer7

Launch Viewer

1. In your component template, add a Div container with the id “viewer”. For example,
<div id="viewer"></div>

2. Add the code below to your component to load the viewer.

ngAfterViewInit(): void {
    this.loadExternalScript('/viewer/js/eViewer7_angular.js').then(() => {
      let eViewerObj = null;
      eViewerObj = new (window as any).eViewerApp();
      const css = [
        { href: './assets/viewer/styles.css' },
        {
          href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css',
          integrity:
            'sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=',
          crossorigin: 'anonymous',
        },
      ];

      const scripts = [
        './assets/viewer/runtime.js',
        './assets/viewer/polyfills.js',
        './assets/viewer/scripts.js',
        './assets/viewer/main.js',
        './assets/viewer/js/events.js',
      ];

      var options = {
        contextMenuOptions: {
          overrideContextMenus: true,
          location: [
            'documentView',
            'pageThumbnails',
            'docThumbnails',
            'toolbar',
            'docTab',
          ],
        },
      };

      eViewerObj
        .loadViewer('viewer', scripts, css, 'best-fit', options)
        .then(() => {
          eViewerObj.registerLicense(
            'QX0ZUhau5qt0HBLnDQ5XcL+Ih625vvsKCk3fjacNqa/3+F6sDkQFUkso2z6Fi9z/w7MhHwhp0K7q0eX/agSjfY/
            q9HOBHnr7f4TY81KZosgmOKn0PnHHc0te9+Ps4anZ8G0Ub1lsIO2vL6CNpB5yjHeWY1E+0M7GFQYdtXowd4brMwf
            ESdAvLEPibII77mwVmNvGzyEzNUpX1Krknne2vJzI8+jKs93zu0ADdxPUz1aPqeTTVhwokyPx6aE5aMQJA7/vTBJ
            iIha4h7YX3oWjhgYJWch5AWbrki1VMM/2TetT4DqIzWMXUKWfQqWMHfg43vtIlwDv3ZYSBTZuT+Y3Smp7WbyCHPz
            oaSY0Bd0DpzJoGIhMr223ike9gqQBfknTQ9cbT0DRlXhjFOgZMaN4NHyKwiLQ6RYLBnFuSR1p1pgYrI4Hqr1/OC1
            ljSxiuuarUFA9lZ9ptOoWy89UGgR0Yrl1hb6GapM5vso/A6KwMdk='
          );

          let viewerPrefSrvc = eViewerObj.getViewerPreferenceService();
          viewerPrefSrvc
            .getUserPreferences(undefined, undefined, true)
            .then((preferences) => {
              viewerPrefSrvc.setUserPreferences(
                JSON.stringify(preferences.userPreferences),
                JSON.stringify(preferences.shortcutPreferences)
              );
            });
        });
    });
  }

  private loadExternalScript(src: string): Promise {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.type = 'application/javascript';
      script.src = src;
      script.onload = () => resolve();
      script.onerror = () => reject(`Script load error: ${src`);
      document.head.appendChild(script);
    });

Load Document

1. Define class variables for viewerServerURL, which points to the eViewerServer URL in the “<protocol>://<server_name>:<port>/api/v1/” format. Also, define savingEndpoint as a function object to receive the save callback.

viewerServerURL = "http://localhost:8086/api/v1/";
savingEndpoint = (response) => {
    return new Promise((resolve, reject) => {
      console.info(response);
      const { clientDocID, docContent, annContent, annMimeType, mimeType } = response;
      resolve("SUCCESS");
 });
}

2. Invoke the setDocumentEndPointOptions API.

let options = {
  type: "GET",
  headers: {
    Authorization: "Bearer ",
    Accept: "application/octet-stream.",
  },
  savePayLoadType:"application/json",
};

  this.eViewerObj.setDocumentEndPointOptions(
    options,
    this.viewerServerURL,
    this.savingEndpoint,
  );

3. Invoke the loadDocumentWithOptions API to load the document into the viewer.

let documentSrvc = eViewerObj.getDocumentService();
documentSrvc.loadDocumentWithOptions(
                 'http://localhost:4200/assets/sample.pdf',
                 '', // annotation url if available
                 '1', //some unique id of the document
                 //optional parameter
                 {
                  isEditMode: true,
                  tabStyle: {
                    fileName: 'some-document-description-OUTFOCUS',
                 },
                  focusTabStyle: {
                    fileName: 'some-document-description-INFOCUS',
                  },
                 }
                )
                .then((response) => {
                  console.log(response);
                });

For a sample Angular app, refer to the following link:

https://github.com/eviewer/eviewer7-angular-sample-app

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 = "http://www.africau.edu/images/default/sample.pdf";
    let clientDocID = "SOMEUNIQUEID";
    let userName = "USERNAME";
    let options = {
      type: "GET",
      headers: {
        Authorization:
          "Bearer ",
      },
    };

    const serverUrl = "http://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 = "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.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);
    })