@file-viewer/renderer-word 2.2.4 → 2.2.5

package/dist/wordDocx.d.ts

@@ -9,6 +9,13 @@ export declare const isMissingDocxHeaderFooterRootError: (error: unknown) => boo
  * rolls through lockfiles and private registries.
  */
 export declare const renderDocxWithHeaderFooterFallback: (render: DocxRenderAsync, buffer: ArrayBuffer, target: HTMLDivElement, options: Options) => Promise<boolean>;
+/**
+ * WPS and Word can store a page background as a document-level VML fill. The
+ * DOCX engine intentionally ignores that legacy drawing node, so resolve only
+ * its package-local image relationship here and leave all body layout to it.
+ */
+export declare const resolveDocxPageBackgroundImage: (buffer: ArrayBuffer, createXmlParser?: () => Pick<DOMParser, "parseFromString">) => Promise<string | undefined>;
+export declare const applyDocxPageBackgroundImage: (target: HTMLDivElement, imageUrl: string | undefined) => number;
 /**
  * 渲染docx文件
  */

package/dist/wordDocx.js

@@ -1,3 +1,4 @@
+import JSZip from 'jszip';
 import { resolveFileViewerDocxWorkerJsZipUrl, resolveFileViewerDocxWorkerUrl, resolveFileViewerRuntimeAssetBaseUrl, } from '@file-viewer/core/assets';
 import { applyPrintPageSize, buildPrintPageStyle, createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, formatCssPixels, getElementPrintPageSize, normalizeFileViewerTheme, registerFileViewerZoomProvider, resolveFileViewerFitScale, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
 const DOCX_DEFAULT_PAGE_SIZE = {
@@ -10,6 +11,24 @@ const DOCX_MAX_SCALE = 3;
 const DOCX_ZOOM_STEP = 0.15;
 const DOCX_VENDOR_ASSET_VERSION = '0.3.26';
 const ZIP_SIGNATURE_PK = 0x504b;
+const WORDPROCESSINGML_NAMESPACE = 'http://schemas.openxmlformats.org/wordprocessingml/2006/main';
+const OFFICE_RELATIONSHIP_NAMESPACE = 'http://schemas.openxmlformats.org/officeDocument/2006/relationships';
+const PACKAGE_RELATIONSHIP_NAMESPACE = 'http://schemas.openxmlformats.org/package/2006/relationships';
+const VML_NAMESPACE = 'urn:schemas-microsoft-com:vml';
+const DOCX_DOCUMENT_PART = 'word/document.xml';
+const DOCX_DOCUMENT_RELATIONSHIPS_PART = 'word/_rels/document.xml.rels';
+const DOCX_PAGE_BACKGROUND_CLASS = 'docx-page-background';
+const DOCX_BACKGROUND_MIME_TYPES = {
+    bmp: 'image/bmp',
+    gif: 'image/gif',
+    jpeg: 'image/jpeg',
+    jpg: 'image/jpeg',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    tif: 'image/tiff',
+    tiff: 'image/tiff',
+    webp: 'image/webp'
+};
 // Modern bundlers expose the ESM named exports, while some legacy webpack
 // configurations wrap the CommonJS browser API in `default`.
 const resolveDocxLibrary = (module) => {
@@ -79,6 +98,11 @@ const assertValidDocxPackage = (buffer, context) => {
 const getTargetWindow = (target) => {
     return target.ownerDocument.defaultView;
 };
+const createTargetXmlParser = (target) => {
+    var _a, _b;
+    const DOMParserCtor = (_b = (_a = getTargetWindow(target)) === null || _a === void 0 ? void 0 : _a.DOMParser) !== null && _b !== void 0 ? _b : globalThis.DOMParser;
+    return new DOMParserCtor();
+};
 const getTargetProtocol = (target) => {
     var _a, _b, _c;
     const candidates = [
@@ -96,6 +120,103 @@ const getTargetProtocol = (target) => {
     }
     return '';
 };
+const getElementsByLocalName = (root, namespace, localName) => {
+    const namespaced = Array.from(root.getElementsByTagNameNS(namespace, localName));
+    if (namespaced.length) {
+        return namespaced;
+    }
+    return Array.from(root.getElementsByTagName('*')).filter(element => element.localName === localName);
+};
+const parseDocxXml = (source, parser) => {
+    const xml = parser.parseFromString(source, 'application/xml');
+    return getElementsByLocalName(xml, 'http://www.mozilla.org/newlayout/xml/parsererror.xml', 'parsererror').length
+        ? null
+        : xml;
+};
+const resolvePackagePartPath = (basePart, relationshipTarget) => {
+    const segments = relationshipTarget.startsWith('/') ? [] : basePart.split('/').slice(0, -1);
+    relationshipTarget
+        .replace(/^\/+/, '')
+        .split('/')
+        .forEach(segment => {
+        if (!segment || segment === '.') {
+            return;
+        }
+        if (segment === '..') {
+            segments.pop();
+            return;
+        }
+        segments.push(segment);
+    });
+    return segments.join('/');
+};
+const resolveDocxImageMimeType = (partName) => {
+    var _a;
+    const extension = ((_a = partName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+    return DOCX_BACKGROUND_MIME_TYPES[extension];
+};
+/**
+ * WPS and Word can store a page background as a document-level VML fill. The
+ * DOCX engine intentionally ignores that legacy drawing node, so resolve only
+ * its package-local image relationship here and leave all body layout to it.
+ */
+export const resolveDocxPageBackgroundImage = async (buffer, createXmlParser = () => new DOMParser()) => {
+    try {
+        const archive = await JSZip.loadAsync(buffer);
+        const documentEntry = archive.file(DOCX_DOCUMENT_PART);
+        const relationshipsEntry = archive.file(DOCX_DOCUMENT_RELATIONSHIPS_PART);
+        if (!documentEntry || !relationshipsEntry) {
+            return undefined;
+        }
+        const parser = createXmlParser();
+        const documentXml = parseDocxXml(await documentEntry.async('string'), parser);
+        const relationshipsXml = parseDocxXml(await relationshipsEntry.async('string'), parser);
+        if (!documentXml || !relationshipsXml) {
+            return undefined;
+        }
+        const background = getElementsByLocalName(documentXml, WORDPROCESSINGML_NAMESPACE, 'background')[0];
+        const fill = background && getElementsByLocalName(background, VML_NAMESPACE, 'fill')[0];
+        const relationshipId = (fill === null || fill === void 0 ? void 0 : fill.getAttributeNS(OFFICE_RELATIONSHIP_NAMESPACE, 'id')) || (fill === null || fill === void 0 ? void 0 : fill.getAttribute('r:id'));
+        if (!relationshipId) {
+            return undefined;
+        }
+        const relationship = getElementsByLocalName(relationshipsXml, PACKAGE_RELATIONSHIP_NAMESPACE, 'Relationship').find(candidate => candidate.getAttribute('Id') === relationshipId);
+        const target = relationship === null || relationship === void 0 ? void 0 : relationship.getAttribute('Target');
+        if (!target || (relationship === null || relationship === void 0 ? void 0 : relationship.getAttribute('TargetMode')) === 'External') {
+            return undefined;
+        }
+        const partName = resolvePackagePartPath(DOCX_DOCUMENT_PART, target);
+        const mimeType = resolveDocxImageMimeType(partName);
+        const imageEntry = archive.file(partName) || archive.file(decodeURIComponent(partName));
+        if (!mimeType || !imageEntry) {
+            return undefined;
+        }
+        return `data:${mimeType};base64,${await imageEntry.async('base64')}`;
+    }
+    catch {
+        // A page background is optional and must never make an otherwise readable
+        // document fail. The DOCX engine remains responsible for package errors.
+        return undefined;
+    }
+};
+export const applyDocxPageBackgroundImage = (target, imageUrl) => {
+    if (!imageUrl) {
+        return 0;
+    }
+    let applied = 0;
+    target.querySelectorAll('section.docx').forEach(page => {
+        const existing = Array.from(page.children).find(child => child.classList.contains(DOCX_PAGE_BACKGROUND_CLASS));
+        const background = existing || target.ownerDocument.createElement('div');
+        background.className = DOCX_PAGE_BACKGROUND_CLASS;
+        background.setAttribute('aria-hidden', 'true');
+        background.style.backgroundImage = `url("${imageUrl}")`;
+        if (!existing) {
+            page.prepend(background);
+        }
+        applied += 1;
+    });
+    return applied;
+};
 const shouldUseDocxWorker = (target, docxOptions) => {
     var _a, _b;
     if ((docxOptions === null || docxOptions === void 0 ? void 0 : docxOptions.worker) === false) {
@@ -250,6 +371,15 @@ const DOCX_RESPONSIVE_CSS = `
   overflow: hidden;
   transform-origin: top center;
 }
+.docx-fit-viewer .docx-page-background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 .docx-fit-viewer[data-docx-dark-mode='true'] .docx-page-frame > section.docx,
 .docx-fit-viewer[data-docx-dark-mode='true'] .docx-flow-frame > section.docx {
   background: rgb(51, 51, 51) !important;
@@ -552,7 +682,10 @@ export default async function (buffer, target, context) {
         (_a = context === null || context === void 0 ? void 0 : context.onProgressiveRender) === null || _a === void 0 ? void 0 : _a.call(context);
     };
     const docxOptions = createDocxOptions(target, context, notifyProgressiveRender);
-    const { defaultOptions, renderAsync } = await loadLibrary();
+    const [{ defaultOptions, renderAsync }, pageBackgroundImage] = await Promise.all([
+        loadLibrary(),
+        resolveDocxPageBackgroundImage(buffer, () => createTargetXmlParser(target))
+    ]);
     target.dataset.docxWorker = docxOptions.useWorker ? 'self' : 'false';
     target.dataset.docxDarkMode = docxOptions.darkMode ? 'true' : 'false';
     const usedHeaderFooterFallback = await renderDocxWithHeaderFooterFallback(renderAsync, buffer, target, {
@@ -560,6 +693,8 @@ export default async function (buffer, target, context) {
         ...docxOptions
     });
     target.dataset.docxHeaderFooterFallback = usedHeaderFooterFallback ? 'true' : 'false';
+    target.dataset.docxPageBackground =
+        applyDocxPageBackgroundImage(target, pageBackgroundImage) > 0 ? 'true' : 'false';
     notifyProgressiveRender();
     const disposeResponsive = makeDocxResponsive(target, context);
     (_a = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _a === void 0 ? void 0 : _a.call(context, {
@@ -587,6 +722,7 @@ export default async function (buffer, target, context) {
             delete target.dataset.docxWorker;
             delete target.dataset.docxDarkMode;
             delete target.dataset.docxHeaderFooterFallback;
+            delete target.dataset.docxPageBackground;
             target.innerHTML = '';
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-word",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "private": false,
   "type": "module",
   "description": "Standalone Word and compatible document renderer plugin for File Viewer powered by @file-viewer/docx, @file-viewer/doc, and RTF/ODF parsing.",
@@ -57,8 +57,8 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.2.4",
-    "@file-viewer/doc": "2.2.4",
+    "@file-viewer/core": "2.2.5",
+    "@file-viewer/doc": "2.2.5",
     "@file-viewer/docx": "^0.3.26",
     "jszip": "^3.10.1",
     "rtf.js": "^3.0.9"