Sections
-
Frameworks
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); })