Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8.7.4
Detailed description of issue
We implement the viewer on our website to be able to view pdfs in List 1 section of the screenshot below. It worked great, no issues.
Now we need to do the same for List 2. However, once we implemented it in similar fashion we run into a problem when the viewer doesn’t want to load. For example, if I can open pdfs in List 1 then I can’t open any pdf in List 2, or vice versa - if I can open pdfs in List 2 then I can’t open any pdf in List 1.
The error that we see is this:
PDFJSDocumentType.js:118 A license key is required to use the view only build of PDF.js Express. Get your free license key at PDF.js Express (account required)
We verified that we are passing the license key. We noticed that when the viewer doesn’t load there is no call to auth api
This is what we see
Our project is made of small react apps. So list 1 and list 2 are separate react apps that share some components. The viewer opens up in a modal which is a reusable component.
Expected behaviour
We expect for the document to open
Does your issue happen with every document, or just one?
some documents
Link to document
n/a
Code snippet
This is the document viewer component.
file.file is the blob we are passing in
import WebViewer from “@pdftron/pdfjs-express-viewer”;
import { useEffect, useRef, useState } from “react”;
import { ViewerFile } from “./typings”;
type Props = {
file: ViewerFile;
onDownload?: (file: ViewerFile) => void;
};
const DocumentViewer = ({ file, onDownload }: Props) => {
const viewer = useRef(null);
const [instance, setInstance] = useState(null);
useEffect(() => {
WebViewer(
{
path: “/Resources/dist/js/pdfjsexpress”,
licenseKey: “licenseKey”
css: “/Resources/dist/styles/app.css”,
disableLogs: true,
enableAnnotations: false,
disabledElements: [
“moreButton”,
“menuButton”,
“searchButton”,
“printButton”,
“downloadButton”,
“fullscreenButton”,
“toggleNotesButton”,
“panToolButton”,
“selectToolButton”,
“thumbnailsPanelButton”,
“thumbnailsSizesSlider”,
“thumbnailsPanel”,
“leftPanelButton”,
“stickyToolButton”,
“textSelectButton”,
“contextMenuPopup”,
],
},
viewer.current
).then(instance => {
setInstance(instance);
});
}, );
useEffect(() => {
if (instance) {
const { UI, Core } = instance;
const isDesktop = window.innerWidth > 992;
UI.setPrintQuality(3);
//Print options
UI.setDefaultPrintOptions({
includeComments: false,
includeAnnotations: false,
});
// Custom buttons
UI.setHeaderItems((header: any) => {
const defaultHeader = header.getHeader("default");
defaultHeader.push({
img: "icon-header-download",
index: -1,
title: "Download",
type: "actionButton",
element: "downloadButton",
onClick: () => {
if (onDownload) {
onDownload(file);
} else {
UI.downloadPdf();
}
},
});
defaultHeader.push({
img: "icon-header-print-line",
index: -1,
title: "Print",
type: "actionButton",
element: "printButton",
onClick: () => UI.printInBackground(),
});
if (isDesktop) {
defaultHeader.push({
img: "icon-header-full-screen",
index: -1,
title: "Toggle full screen",
type: "actionButton",
element: "fullscreenButton",
onClick: () => UI.toggleFullScreen(),
});
}
});
if (isDesktop) {
// Default zoom to 120% on bigger screens
Core.documentViewer.addEventListener("documentLoaded", () => {
Core.documentViewer.zoomTo(1.2);
});
}
}
}, [file, onDownload, instance]);
useEffect(() => {
if (instance && file?.file) {
instance.UI.loadDocument(file.file, { filename: file.fileName });
}
}, [instance, file]);
if (!file?.file) {
return null;
}
return (
<div className=“App” style={{ height: “100%” }}>
<div className=“webviewer” ref={viewer} style={{ height: “100%” }} />
);
};
export default DocumentViewer;
The viewer component is wrapped in a modal, which we then use like this for each page/section where we want to add ability to open pdf document
<DocumentViewerModal
show={state.showDocViewerModal}
onClose={() =>
setState({
showDocViewerModal: false,
})
}
file={state.file}
/>
