Hi kkim,
This is my code for WebViewer, and now is live, this is url with token:https://nunb.mpanel.app/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3N1ZUlkIjo2OTY3LCJleHAiOjE2Nzg0NTc5ODQsImluc3RhbmNlIjoiYW16In0.GEwA46hweOcKr5ELUlHYGWgle5we-FA62lt1vJ31f2s.
<template>
<div ref="viewer"></div>
</template>
<script>
/* eslint-disable */
import WebViewer from "@pdftron/pdfjs-express-viewer";
export default {
name: "WebViewer",
props: {
path: String,
pdfUrl: String,
pdfLan: String,
urlIssues: String,
},
mounted: function () {
WebViewer(
{
path: this.path,
initialDoc: this.urlIssues,
licenseKey: "kL3Hn4gvrCtCWg2ZI3yH",
},
this.$refs.viewer
).then((instance) => {
// instance.UI.disableElements(["ViewControls", "viewControlsButton"]);
instance.UI.disableElements(["selectTool", "selectToolButton"]);
instance.UI.disableElements(["marqueeTool", "marqueeToolButton"]);
instance.UI.disableElements(["language", "languageButton"]);
instance.UI.disableElements(["download", "downloadButton"]);
instance.UI.disableElements(["print", "printButton"]);
instance.UI.disableElements(["fullscreenButton"]);
instance.UI.disableElements(["menuButton"]);
instance.UI.disableElements(["viewControlsButton"]);
// pan tool
const { Tools } = instance.Core;
const panTool = Tools.ToolNames.PAN;
instance.UI.setToolMode(panTool);
instance.UI.iframeWindow.addEventListener("loaderror", (err) => {
// Do something with error. eg. instance.showErrorMessage('An error has occurred')
});
// disable right clicks
instance.UI.contextMenuPopup.update([
{
type: "none",
label: "",
onClick: () => console.log("clicked"),
},
]);
// set language mode
instance.UI.setLanguage(this.pdfLan);
// set layout mode
instance.setLayoutMode(instance.LayoutMode.Single);
if (window.innerWidth > 450) {
instance.setLayoutMode(instance.LayoutMode.FacingCover);
}
// now you can access APIs through the WebViewer instance
const { Core, UI } = instance;
// adding an event listener for when a document is loaded
Core.documentViewer.addEventListener("documentLoaded", () => {
console.log("document loaded");
});
// adding an event listener for when the page number has changed
Core.documentViewer.addEventListener(
"pageNumberUpdated",
(pageNumber) => {
console.log(`Page number is: ${pageNumber}`);
}
);
// add fullscreen icon
instance.UI.setHeaderItems((header) => {
header.getHeader("default").push({
img: "icon-header-full-screen",
index: -1,
type: "actionButton",
element: "fullScreenButton",
onClick: () => {
instance.UI.toggleFullScreen();
},
});
});
// add dark mode icon
let isDarkMode = false;
function toggleDarkMode() {
isDarkMode = !isDarkMode;
if (isDarkMode) {
// Postaviti tamni režim
instance.UI.setTheme("dark");
} else {
// Postaviti svetli režim
instance.UI.setTheme("light");
}
}
// Dodavanje dugmeta u zaglavlje za uključivanje/isključivanje dark mode
instance.UI.setHeaderItems((header) => {
header.getHeader("default").push({
img: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
</svg>`,
index: -1,
type: "actionButton",
element: "darkModeButton",
onClick: toggleDarkMode,
});
});
// add logo
UI.setHeaderItems((header) => {
header.unshift({
type: "customElement",
render: () => {
const logo = document.createElement("img");
logo.src =
" https://www.politika.rs/themed/politika/img/branding/politika-logo-nopadding.svg";
logo.style.width = "100px";
logo.style.marginLeft = "10px";
logo.style.marginRight = "30px";
logo.style.cursor = "pointer";
logo.onclick = () => {
window.open("https://amz.mpanel.app/", "_blank");
};
return logo;
},
});
});
});
},
};
</script>