using PDF.js Express Viewer.
- UI version : 8.4.1
- Core version : 8.4.0
** issue **
I am currently using NPM installed in vue.js.
I want to customize the viewer through the css file I wrote.
However, the viewer cannot read my css file location properly.
Please let me know if I made any mistakes.
Expected behaviour
I have the code we created is as follows.
In this case, I think the style should be changed as below.
(The photo was tested by changing the style through the Chrome developer tool.)
But it doesn’t work.
Does your issue happen with every document, or just one?
everu document.
Link to document
Code snippet
<template>
<div>
<div ref="viewer"></div>
<div ref="test-viewer"></div>
</div>
</template>
<script>
import WebViewer from "@pdftron/pdfjs-express-viewer";
export default {
name: "ExpressViewer",
mounted() {
WebViewer(
{
path: "../../dist/public/pdfjsexpress",
initialDoc:
"https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf", // replace with your own PDF file
licenseKey: "VMeLR5MsW5lX3X9YfqQF",
css: "../assets/test_style.css",
},
this.$refs.viewer
).then((instance) => {
// at this point, the viewer is 'ready'
// now you can access APIs through the WebViewer instance
const { Core, UI } = instance;
// console.log(Core.Document.cropPages([0, 1, 2], 40, 40, 40, 40));
// Core.createDocument(
// "https://data.polarishare.com/data/202202/40D/6bc8fa33-bd75-4437-b3b3-1b9ae4e2944f.pdf",
// "test-viewer"
// ).then((instance) => {
// console.log("Core", instance);
// instance.cropPages([1], 100, 100, 100, 100);
// console.log("meta data", instance.getMetadata);
// });
UI.setHeaderItems((header) => {
header.delete(9);
header.unshift(
{
type: "customElement",
render: () => {
const logo = document.createElement("img");
logo.src = "https://www.pdftron.com/downloads/logo.svg";
logo.style.width = "200px";
logo.style.marginLeft = "10px";
logo.style.cursor = "pointer";
logo.onclick = () => {
window.open("https://www.pdftron.com", "_blank");
};
return logo;
},
},
{
type: "spacer",
}
);
});
document.getElementsByClassName("DocumentConatiner").background = "red";
// const nextButton = document.getElementById("test-button");
// nextButton.innerHTML = "Next";
// nextButton.style.position = "absolute";
// nextButton.style.top = "50%";
// nextButton.style.right = "0";
// nextButton.style.zIndex = "9999";
// nextButton.onclick = () => {
// instance.Core.documentViewer.setCurrentPage(
// instance.Core.documentViewer.getCurrentPage() + 1
// );
// };
// 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}`);
}
);
// UI.setHeaderItems((header) => {
// header.push({
// type: "actionButton",
// img: "https://icons.getbootstrap.com/assets/icons/caret-right-fill.svg",
// onClick: () => {
// const currentPage = Core.documentViewer.getCurrentPage();
// const totalPages = Core.documentViewer.getPageCount();
// const atLastPage = currentPage === totalPages;
// if (atLastPage) {
// Core.documentViewer.setCurrentPage(1);
// } else {
// Core.documentViewer.setCurrentPage(currentPage + 1);
// }
// },
// });
// });
// const nextPageHandler = () => {
// const currentPage = Core.documentViewer.getCurrentPage();
// const totalPages = Core.documentViewer.getPageCount();
// const atLastPage = currentPage === totalPages;
// if (atLastPage) {
// Core.documentViewer.setCurrentPage(1);
// } else {
// Core.documentViewer.setCurrentPage(currentPage + 1);
// }
// };
});
},
};
</script>
<style></style>
.DocumentContainer {
background: red;
}
