feat: Implement PDF viewer with search, rendering, and outline functionality using pdfjs-dist.

Author: JuliusBairaktaris

viewer/js/index.js

@@ -435,107 +435,108 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger = 0) {
     };
 
     task.promise.catch(handleRenderingError);
+}
 
-    globalThis.onRenderPage = function (zoom) {
-        if (pageRendering) {
-            if (newPageNumber === channel.getPage() && newZoomRatio === channel.getZoomRatio() &&
-                orientationDegrees === channel.getDocumentOrientationDegrees()) {
-                useRender = true;
-                return;
-            }
+globalThis.onRenderPage = function (zoom) {
+    if (pageRendering) {
+        if (newPageNumber === channel.getPage() && newZoomRatio === channel.getZoomRatio() &&
+            orientationDegrees === channel.getDocumentOrientationDegrees()) {
+            useRender = true;
+            return;
+        }
 
-            renderPending = true;
-            renderPendingZoom = zoom;
-            if (task !== null) {
-                task.cancel();
-                task = null;
-            }
-        } else {
-            renderPage(channel.getPage(), zoom, false);
+        renderPending = true;
+        renderPendingZoom = zoom;
+        if (task !== null) {
+            task.cancel();
+            task = null;
         }
-    };
+    } else {
+        renderPage(channel.getPage(), zoom, false);
+    }
+};
 
-    globalThis.isTextSelected = function () {
-        return globalThis.getSelection().toString() !== "";
-    };
+globalThis.isTextSelected = function () {
+    return globalThis.getSelection().toString() !== "";
+};
 
-    globalThis.getDocumentOutline = function () {
-        pdfDoc.getOutline().then(function (outline) {
-            getSimplifiedOutline(outline, outlineAbort).then(function (outlineEntries) {
-                if (outlineEntries !== null) {
-                    channel.setDocumentOutline(JSON.stringify(outlineEntries));
-                } else {
-                    channel.setDocumentOutline(null);
-                }
-            }).catch(function (error) {
-                console.log("getSimplifiedOutline error: " + error);
-            });
+globalThis.getDocumentOutline = function () {
+    pdfDoc.getOutline().then(function (outline) {
+        getSimplifiedOutline(outline, outlineAbort).then(function (outlineEntries) {
+            if (outlineEntries !== null) {
+                channel.setDocumentOutline(JSON.stringify(outlineEntries));
+            } else {
+                channel.setDocumentOutline(null);
+            }
         }).catch(function (error) {
-            console.log("pdfDoc.getOutline error: " + error);
+            console.log("getSimplifiedOutline error: " + error);
         });
-    };
+    }).catch(function (error) {
+        console.log("pdfDoc.getOutline error: " + error);
+    });
+};
 
-    globalThis.abortDocumentOutline = function () {
-        outlineAbort.abort();
-        outlineAbort = new AbortController();
-    };
+globalThis.abortDocumentOutline = function () {
+    outlineAbort.abort();
+    outlineAbort = new AbortController();
+};
+
+globalThis.toggleTextLayerVisibility = function () {
+    let textLayerForeground = "red";
+    if (isTextLayerVisible) {
+        textLayerForeground = "transparent";
+    }
+    document.documentElement.style.setProperty("--text-layer-foreground", textLayerForeground);
+    isTextLayerVisible = !isTextLayerVisible;
+};
 
-    globalThis.toggleTextLayerVisibility = function () {
-        let textLayerForeground = "red";
-        if (isTextLayerVisible) {
-            textLayerForeground = "transparent";
+globalThis.loadDocument = function () {
+    const pdfPassword = channel.getPassword();
+    const loadingTask = getDocument({
+        url: "https://localhost/placeholder.pdf",
+        cMapUrl: "https://localhost/viewer/cmaps/",
+        cMapPacked: true,
+        password: pdfPassword,
+        iccUrl: "https://localhost/viewer/iccs/",
+        isEvalSupported: false,
+        // If a font isn't embedded, the viewer falls back to default system fonts. On Android,
+        // there often isn't a good substitution provided by the OS, so we need to bundle standard
+        // fonts to improve the rendering of certain PDFs:
+        //
+        // https://github.com/mozilla/pdf.js/pull/18465
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1882613
+        useSystemFonts: false,
+        standardFontDataUrl: "https://localhost/viewer/standard_fonts/",
+        wasmUrl: "https://localhost/viewer/wasm/"
+    });
+    loadingTask.onPassword = (_, error) => {
+        if (error === PasswordResponses.NEED_PASSWORD) {
+            channel.showPasswordPrompt();
+        } else if (error === PasswordResponses.INCORRECT_PASSWORD) {
+            channel.invalidPassword();
         }
-        document.documentElement.style.setProperty("--text-layer-foreground", textLayerForeground);
-        isTextLayerVisible = !isTextLayerVisible;
     };
 
-    globalThis.loadDocument = function () {
-        const pdfPassword = channel.getPassword();
-        const loadingTask = getDocument({
-            url: "https://localhost/placeholder.pdf",
-            cMapUrl: "https://localhost/viewer/cmaps/",
-            cMapPacked: true,
-            password: pdfPassword,
-            iccUrl: "https://localhost/viewer/iccs/",
-            isEvalSupported: false,
-            // If a font isn't embedded, the viewer falls back to default system fonts. On Android,
-            // there often isn't a good substitution provided by the OS, so we need to bundle standard
-            // fonts to improve the rendering of certain PDFs:
-            //
-            // https://github.com/mozilla/pdf.js/pull/18465
-            // https://bugzilla.mozilla.org/show_bug.cgi?id=1882613
-            useSystemFonts: false,
-            standardFontDataUrl: "https://localhost/viewer/standard_fonts/",
-            wasmUrl: "https://localhost/viewer/wasm/"
+    loadingTask.promise.then(function (newDoc) {
+        channel.onLoaded();
+        pdfDoc = newDoc;
+        channel.setNumPages(pdfDoc.numPages);
+        pdfDoc.getMetadata().then(function (data) {
+            channel.setDocumentProperties(JSON.stringify(data.info));
+        }).catch(function (error) {
+            console.log("getMetadata error: " + error);
         });
-        loadingTask.onPassword = (_, error) => {
-            if (error === PasswordResponses.NEED_PASSWORD) {
-                channel.showPasswordPrompt();
-            } else if (error === PasswordResponses.INCORRECT_PASSWORD) {
-                channel.invalidPassword();
-            }
-        };
-
-        loadingTask.promise.then(function (newDoc) {
-            channel.onLoaded();
-            pdfDoc = newDoc;
-            channel.setNumPages(pdfDoc.numPages);
-            pdfDoc.getMetadata().then(function (data) {
-                channel.setDocumentProperties(JSON.stringify(data.info));
-            }).catch(function (error) {
-                console.log("getMetadata error: " + error);
-            });
-            pdfDoc.getOutline().then(function (outline) {
-                channel.setHasDocumentOutline(outline && outline.length > 0);
-            }).catch(function (error) {
-                console.log("getOutline error: " + error);
-            });
-            renderPage(channel.getPage(), false, false);
-        }, function (reason) {
-            console.error(reason.name + ": " + reason.message);
+        pdfDoc.getOutline().then(function (outline) {
+            channel.setHasDocumentOutline(outline && outline.length > 0);
+        }).catch(function (error) {
+            console.log("getOutline error: " + error);
         });
-    };
+        renderPage(channel.getPage(), false, false);
+    }, function (reason) {
+        console.error(reason.name + ": " + reason.message);
+    });
+};
 
-    globalThis.onresize = () => {
-        setLayerTransform(canvas.clientWidth, canvas.clientHeight, textLayerDiv);
-    };
+globalThis.onresize = () => {
+    setLayerTransform(canvas.clientWidth, canvas.clientHeight, textLayerDiv);
+};