@mstechusa/eviewer7
Version:
[](https://eviewer.net) #### A HTML5-based document viewer built on Angular and JavaScript technologies for the highest level of performance and integration into your applic
68 lines (61 loc) • 6.81 kB
HTML
<html lang="en"><head>
<meta charset="utf-8">
<title>DemoApp</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous">
<script>
var global = global || window;
function loadDefaultComponent() {
let licenseKey = "PROVIDED_BY_MST";
const eViewerObj = new eViewerApp();
var css = [{ href: './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' }
];
var scripts = [
'./runtime.js',
'./polyfills.js',
'./scripts.js',
'./main.js',
'./js/events.js',
// './viewer/vendor.js' // only for non prod builds
];
var options = {
contextMenuOptions: {
overrideContextMenus: false,
location: [
"documentView",
"pageThumbnails",
"docThumbnails",
"toolbar",
"docTab",
],
},
};
eViewerObj
.loadViewer("viewer", scripts, css, "best-fit", options)
.then(() => {
eViewerObj.registerLicense(licenseKey);
const blankPageWorkerSrcUrl= ".." + window.location.pathname + "assets/blankPageWorker.js";
eViewerObj.getDocumentService().setWorkerSrcUrl(blankPageWorkerSrcUrl);
setTimeout(() => {setViewerOptions();}, 100);
});
}
function setViewerOptions() {
const eViewerObj = new eViewerApp();
let viewerPrefSrvc = eViewerObj.getViewerPreferenceService();
viewerPrefSrvc.getUserPreferences(undefined, undefined, undefined, true).then((preferences) => {
viewerPrefSrvc.setUserPreferences(preferences.userPreferences, preferences.shortcutPreferences);
});
}
setTimeout(() => { loadDefaultComponent(); }, 1000);
</script>
<style>@charset "UTF-8";:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}@media print{*,:after,:before{text-shadow:none;box-shadow:none}@page{size:a3}body{min-width:992px}}*{outline:none}body{font-family:Montserrat,sans-serif;margin:0;overflow-x:hidden;color:#67757c;font-weight:300;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body,html{background:#fff}html{position:relative;min-height:100%}:root{--blue-1:#e7edf3;--blue-2:#dde6ee;--blue-3:#cfd8e0;--blue-4:#c7d2dd;--blue-5:#205783;--blue-6:#19466c;--gray-0:#fff;--gray-1:#f8f9fa;--gray-2:#f1f3f5;--gray-3:#e7ebee;--gray-4:#dee2e6;--gray-5:#cfd4da;--gray-6:#adb5bd;--gray-7:#868e96;--gray-8:#485056;--gray-9:#343a40;--gray-10:#21242a;--gray-11:#101214;--gray-12:#000;--yellow-1:rgba(250,206,0,.502);--red:red;--component-background:var(--gray-0);--mobile-presets-background:var(--gray-1);--faded-component-background:var(--gray-2);--toggle-zoom-overlay-background:var(--gray-2);--ribbons-background:var(--gray-3);--document-background-color:var(--gray-2);--error-text-color:var(--red);--error-border-color:var(--red);--slider-filled:var(--blue-5);--slider-background:var(--gray-4);--badge-fill:var(--gray-8);--badge-text-color:var(--gray-0);--view-header-icon-active-fill:var(--blue-6);--text-color:var(--gray-8);--faded-text:var(--gray-7);--placeholder-text:var(--gray-6);--ribbon-active-color:var(--blue-5);--no-presets-text:var(--gray-6);--disabled-text:var(--gray-5);--disabled-icon:var(--gray-5);--scroll-chevron-color:var(--gray-6);--icon-color:var(--gray-7);--selected-icon-color:var(--gray-8);--view-header-button-hover:var(--blue-1);--view-header-button-active:var(--blue-2);--popup-button-hover:var(--blue-1);--popup-button-active:var(--blue-2);--primary-button:var(--blue-5);--primary-button-text:var(--gray-1);--primary-button-hover:var(--blue-6);--secondary-button-text:var(--blue-5);--secondary-button-hover:var(--blue-6);--box-shadow:var(--gray-6);--document-box-shadow:var(--gray-7);--panel-background:var(--gray-1);--divider:var(--gray-5);--reply-divider:var(--gray-3);--side-panel-border:var(--divider);--border:var(--gray-5);--focus-border:var(--blue-5);--color-palette-border:var(--gray-8);--image-signature-drop-background:var(--blue-1);--image-signature-drop-border:var(--blue-5);--signature-draw-background:var(--gray-2);--modal-stroke-and-border:var(--gray-5);--modal-negative-space:#0000004d;--spinner-negative-space:#0000004d;--white-color-palette-border:var(--border);--list-separator-color:var(--gray-7);--scrollbar-color:var(--gray-6);--note-box-shadow:var(--gray-7);--note-box-shadow-expanded:#868e963d;--tools-header-background:var(--gray-3);--view-header-background:var(--gray-1);--tools-overlay-background:var(--gray-0);--tools-button-hover:var(--blue-3);--tools-button-active:var(--blue-4);--tools-overlay-button-hover:var(--blue-1);--tools-overlay-button-active:var(--blue-2);--outline-color:var(--blue-5);--outline-hover:var(--gray-2);--outline-selected:var(--blue-1);--preset-background:var(--gray-1)}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
<body>
<div style="height: 100vh; overflow: hidden;" id="viewer">
<div>
<script src="./js/eViewer7_browser.js" defer></script>
</body></html>