feat(doc-viewer): allow self hosted pdfjs worker file

Author: gjulivan

packages/pluggableWidgets/document-viewer-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We added advance config for user to allow self-hosted pdfjs worker file.
+
 ## [1.1.0] - 2025-09-11
 
 ### Changed

packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx

@@ -1,4 +1,4 @@
-import { createElement, Fragment, useCallback, useEffect, useState } from "react";
+import { createElement, Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
 import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
@@ -7,18 +7,20 @@ import { useZoomScale } from "../utils/useZoomScale";
 import BaseViewer from "./BaseViewer";
 import { DocRendererElement, DocumentRendererProps, DocumentStatus } from "./documentRenderer";
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-    "/widgets/com/mendix/shared/pdfjs/pdf.worker.mjs",
-    import.meta.url
-).toString();
-
 const options = {
     cMapUrl: "/widgets/com/mendix/shared/pdfjs/cmaps/",
     standardFontDataUrl: "/widgets/com/mendix/shared/pdfjs/standard_fonts"
 };
 
 const PDFViewer: DocRendererElement = (props: DocumentRendererProps) => {
-    const { file, setDocumentStatus } = props;
+    const { file, setDocumentStatus, pdfjsWorkerUrl } = props;
+    pdfjs.GlobalWorkerOptions.workerSrc = useMemo(() => {
+        if (pdfjsWorkerUrl?.status === "available" && pdfjsWorkerUrl?.value) {
+            return pdfjsWorkerUrl.value;
+        }
+        return `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+    }, [pdfjsWorkerUrl]);
+
     const [numberOfPages, setNumberOfPages] = useState<number>(1);
     const { zoomLevel, zoomIn, zoomOut, reset } = useZoomScale();
     const [currentPage, setCurrentPage] = useState<number>(1);

packages/pluggableWidgets/document-viewer-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/document-viewer-web",
     "widgetName": "DocumentViewer",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "View PDF and other document types",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.xml

@@ -81,6 +81,12 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
+        <propertyGroup caption="Advanced">
+            <property key="pdfjsWorkerUrl" type="textTemplate" required="false">
+                <caption>PDF.js worker URL</caption>
+                <description>URL to the PDF.js worker script. Change this if you want to host the script yourself. Leave empty to use the default URL.</description>
+            </property>
+        </propertyGroup>
         <propertyGroup caption="Common">
             <systemProperty key="Name" />
             <systemProperty key="TabIndex" />

packages/pluggableWidgets/document-viewer-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Document Viewer" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Document Viewer" version="1.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DocumentViewer.xml" />
         </widgetFiles>

packages/pluggableWidgets/document-viewer-web/typings/DocumentViewerProps.d.ts

@@ -31,6 +31,7 @@ export interface DocumentViewerContainerProps {
     maxHeightUnit: MaxHeightUnitEnum;
     maxHeight: number;
     overflowY: OverflowYEnum;
+    pdfjsWorkerUrl?: DynamicValue<string>;
 }
 
 export interface DocumentViewerPreviewProps {
@@ -54,4 +55,5 @@ export interface DocumentViewerPreviewProps {
     maxHeightUnit: MaxHeightUnitEnum;
     maxHeight: number | null;
     overflowY: OverflowYEnum;
+    pdfjsWorkerUrl: string;
 }