@file-viewer/renderer-ofd 2.1.23 → 2.1.25

package/README.en.md

@@ -35,6 +35,7 @@ const options = {
 ## Features
 
 - Preview `.ofd` documents in the browser.
+- Preview electronic seal appearance (SES seal images and nested OFD seals) using `StampAnnot` boundaries; preview does not perform cryptographic verification.
 - Lazy-load the OFD parser and renderer at the format boundary.
 - Ship the vendor files inside the npm package for offline and intranet deployments.
 - Support unified zoom, print, HTML export, and lifecycle context integration.

package/README.md

@@ -35,6 +35,7 @@ const options = {
 ## 能力
 
 - 支持 `.ofd` 国产版式文件。
+- 支持电子签章外观预览（SES 印章图片与嵌套 OFD 印章），按 `StampAnnot` 边界叠加显示；预览不做国密验签。
 - 按需动态导入 OFD 解析/渲染代码，不污染首屏。
 - vendor 文件随 npm 包发布，支持企业内网和纯离线部署。
 - 支持统一缩放、打印、HTML 导出和生命周期上下文。

package/dist/ofd.js

@@ -10,10 +10,12 @@ const ofdStyle = `
 .ofd-state[hidden]{display:none!important}
 .ofd-state.error{color:#b42318}
 .ofd-page-frame{position:relative;display:block;margin:0 auto 20px;overflow:visible}
-.ofd-page{display:block;margin-left:auto!important;margin-right:auto!important;box-shadow:0 10px 26px rgba(15,23,42,.12);transition:transform .16s ease}
-.file-viewer[data-viewer-theme='dark'] .ofd-viewer{background:#172033;color:#e5eef8}
-.file-viewer[data-viewer-theme='dark'] .ofd-state{background:rgba(15,23,42,.9);color:#cbd5e1}
-@media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .ofd-viewer{background:#172033;color:#e5eef8}.file-viewer[data-viewer-theme='system'] .ofd-state{background:rgba(15,23,42,.9);color:#cbd5e1}}
+.ofd-page{display:block;margin-left:auto!important;margin-right:auto!important;background:#fff!important;color:#111827!important;color-scheme:only light;forced-color-adjust:none;isolation:isolate;box-shadow:0 10px 26px rgba(15,23,42,.12);transition:transform .16s ease}
+.ofd-page,.ofd-page *{color-scheme:only light;forced-color-adjust:none}
+.ofd-page svg,.ofd-page canvas,.ofd-page img{filter:none!important;mix-blend-mode:normal!important}
+[data-viewer-theme='dark'] .ofd-viewer{background:#172033;color:#e5eef8}
+[data-viewer-theme='dark'] .ofd-state{background:rgba(15,23,42,.9);color:#cbd5e1}
+@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .ofd-viewer{background:#172033;color:#e5eef8}[data-viewer-theme='system'] .ofd-state{background:rgba(15,23,42,.9);color:#cbd5e1}}
 @media print{.ofd-viewer{background:#fff!important}.ofd-stage{padding:0!important;overflow:visible!important}.ofd-page-frame{break-after:page;page-break-after:always;margin:0 auto!important}.ofd-page-frame:last-child{break-after:auto;page-break-after:auto}.ofd-page{box-shadow:none!important;transition:none!important}}
 `;
 const loadOfdModule = (() => {
@@ -73,6 +75,10 @@ const appendPages = (documentRef, target, pages) => {
         const frame = documentRef.createElement('div');
         frame.className = 'ofd-page-frame';
         page.classList.add('ofd-page');
+        page.dataset.viewerThemeBoundary = 'light';
+        page.style.backgroundColor = '#fff';
+        page.style.color = '#111827';
+        page.style.colorScheme = 'only light';
         frame.appendChild(page);
         fragment.appendChild(frame);
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-ofd",
-  "version": "2.1.23",
+  "version": "2.1.25",
   "private": false,
   "type": "module",
   "description": "Standalone OFD renderer plugin for Flyfish File Viewer powered by DLTech21/ofd.js.",
@@ -53,15 +53,19 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.1.23",
+    "@file-viewer/core": "2.1.25",
     "jszip": "^3.10.1"
   },
   "devDependencies": {
+    "linkedom": "^0.18.12",
     "typescript": "^6.0.3"
   },
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc -b tsconfig.json",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "verify:github-94": "node scripts/verify-github-94.mjs",
+    "verify:pageblock-render": "node scripts/verify-pageblock-render.mjs",
+    "verify:render-fidelity": "node scripts/verify-render-fidelity.mjs"
   }
 }

package/vendor/dltech/ofd/ofd_parser.js

@@ -21,6 +21,8 @@
 import JsZip from "jszip";
 import {parseStBox, getExtensionByPath, replaceFirstSlash} from "./ofd_util.js";
 import {Jbig2Image} from '../jbig2/jbig2.js';
+import {pipeline} from "./pipeline.js";
+import {parseSesSignature} from "./ses_signature_parser.js";
 
 const ensureBrowserGlobal = () => {
     // DLTech21/ofd.js 的一部分遗留逻辑读取 Node 风格 global。
@@ -41,7 +43,7 @@ const appendChildValue = function (target, key, value) {
     target[key] = value;
 }
 
-const parseXmlElement = function (element, options) {
+const parseXmlElement = function (element, options, order) {
     const attrPrefix = options.attributeNamePrefix ?? '@_';
     const result = {};
     if (options.ignoreAttributes !== true) {
@@ -53,7 +55,16 @@ const parseXmlElement = function (element, options) {
     const textParts = [];
     for (const child of Array.from(element.childNodes || [])) {
         if (child.nodeType === 1) {
-            appendChildValue(result, child.nodeName, parseXmlElement(child, options));
+            // 渲染层按 pfIndex 做绘制顺序（CSS z-index），这里用前序遍历给每个元素编号，
+            // 还原 Image/Path/Text/PageBlock 在原始文档里交错出现的先后关系。
+            // 若不记录，解析结果会把同名标签分组成数组，渲染时只能按“类型”整批绘制
+            // （所有图片一起、所有路径一起……），导致本该压在图片下方的装饰路径盖住图片。
+            const pfIndex = order ? order.next++ : undefined;
+            const parsedChild = parseXmlElement(child, options, order);
+            if (parsedChild && typeof parsedChild === 'object' && pfIndex !== undefined) {
+                parsedChild.pfIndex = pfIndex;
+            }
+            appendChildValue(result, child.nodeName, parsedChild);
             continue;
         }
         if (child.nodeType === 3 || child.nodeType === 4) {
@@ -92,7 +103,7 @@ const parseXmlToJson = function (xmlData, options = {}) {
         return {};
     }
     return {
-        [root.nodeName]: parseXmlElement(root, options)
+        [root.nodeName]: parseXmlElement(root, options, { next: 0 })
     };
 }
 
@@ -257,6 +268,30 @@ export const parseSingleDoc = async function ([zip, array]) {
     return docs;
 }
 
+const uint8ArrayToBase64 = function (bytes) {
+    const chunkSize = 0x8000;
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += chunkSize) {
+        const chunk = bytes.subarray(i, i + chunkSize);
+        binary += String.fromCharCode.apply(null, chunk);
+    }
+    return btoa(binary);
+}
+
+const sealImageMime = function (type) {
+    const normalized = String(type || '').toLowerCase();
+    if (normalized === 'jpg' || normalized === 'jpeg') {
+        return 'image/jpeg';
+    }
+    if (normalized === 'gif') {
+        return 'image/gif';
+    }
+    if (normalized === 'bmp') {
+        return 'image/bmp';
+    }
+    return 'image/png';
+}
+
 export const doGetDocRoot = async function (zip, docbody) {
     let docRoot = docbody['ofd:DocRoot'];
     docRoot = normalizeZipPath(replaceFirstSlash(docRoot));
@@ -267,18 +302,33 @@ export const doGetDocRoot = async function (zip, docbody) {
     for (const stamp of stampAnnot) {
         if (stamp.sealObj && Object.keys(stamp.sealObj).length > 0) {
             if (stamp.sealObj.type === 'ofd') {
-                const stampObjs = await getSealDocumentObj(stamp);
-                for (let stampObj of stampObjs) {
-                    stamp.stampAnnot.boundary = parseStBox(stamp.stampAnnot['@_Boundary']);
-                    //console.log(stamp.stampAnnot.boundary)
-                    stamp.stampAnnot.pageRef = stamp.stampAnnot['@_PageRef'];
-                    if (!stampAnnotArray[stamp.stampAnnot['@_PageRef']]) {
-                        stampAnnotArray[stamp.stampAnnot['@_PageRef']] = [];
+                try {
+                    const stampObjs = await getSealDocumentObj(stamp);
+                    let annotArray = [];
+                    annotArray = annotArray.concat(stamp.stampAnnot);
+                    for (const annot of annotArray) {
+                        if (!annot) {
+                            continue;
+                        }
+                        annot.boundary = parseStBox(annot['@_Boundary']);
+                        annot.pageRef = annot['@_PageRef'];
+                        for (let stampObj of stampObjs) {
+                            if (!stampAnnotArray[annot['@_PageRef']]) {
+                                stampAnnotArray[annot['@_PageRef']] = [];
+                            }
+                            stampAnnotArray[annot['@_PageRef']].push({
+                                type: 'ofd',
+                                obj: stampObj,
+                                stamp: {...stamp, stampAnnot: annot},
+                            });
+                        }
                     }
-                    stampAnnotArray[stamp.stampAnnot['@_PageRef']].push({type: 'ofd', obj: stampObj, stamp});
+                } catch (e) {
+                    console.warn('[ofd] nested OFD seal parse failed', e);
                 }
-            } else if (stamp.sealObj.type === 'png') {
-                let img = 'data:image/png;base64,' + btoa(String.fromCharCode.apply(null, stamp.sealObj.ofdArray));
+            } else if (stamp.sealObj.ofdArray?.length) {
+                const mime = sealImageMime(stamp.sealObj.type);
+                let img = `data:${mime};base64,` + uint8ArrayToBase64(stamp.sealObj.ofdArray);
                 let stampArray = [];
                 stampArray = stampArray.concat(stamp.stampAnnot);
                 for (const annot of stampArray) {
@@ -523,16 +573,93 @@ const parsePage = async function (zip, obj, doc) {
 }
 
 const getSignature = async function (zip, signatures, doc) {
-    // 签章解析依赖 ASN.1、国密算法和证书校验链路。在线预览先跳过签章校验，
-    // 以免个别签章解析失败阻断正文页渲染；业务如需验签可在服务端独立处理。
-    void zip;
-    void signatures;
-    void doc;
-    return [];
+    // 预览只解析签章外观（SES 印章图片 / 嵌套 OFD），不做国密/证书验签，
+    // 单个签章失败不影响正文页渲染。
+    let stampAnnot = [];
+    if (!signatures) {
+        return stampAnnot;
+    }
+    try {
+        let signaturesPath = normalizeZipPath(replaceFirstSlash(signatures));
+        if (!startsWithZipRoot(signaturesPath, doc)) {
+            signaturesPath = joinZipPath(doc, signaturesPath);
+        }
+        if (!getZipEntry(zip, signaturesPath)) {
+            return stampAnnot;
+        }
+        let data = await getJsonFromXmlContent(zip, signaturesPath);
+        let signature = data['json']['ofd:Signatures']['ofd:Signature'];
+        let signatureArray = [];
+        signatureArray = signatureArray.concat(signature);
+        for (const sign of signatureArray) {
+            if (!sign) {
+                continue;
+            }
+            try {
+                let signatureLoc = normalizeZipPath(replaceFirstSlash(sign['@_BaseLoc']));
+                let signatureID = sign['@_ID'];
+                if (signatureLoc && signatureLoc.indexOf('Signs') === -1 && !startsWithZipRoot(signatureLoc, doc)) {
+                    signatureLoc = joinZipPath('Signs', signatureLoc);
+                }
+                if (!startsWithZipRoot(signatureLoc, doc)) {
+                    signatureLoc = joinZipPath(doc, signatureLoc);
+                }
+                const parsed = await getSignatureData(zip, signatureLoc, signatureID);
+                if (parsed) {
+                    stampAnnot.push(parsed);
+                }
+            } catch (e) {
+                console.warn('[ofd] signature entry parse failed', sign?.['@_ID'], e);
+            }
+        }
+    } catch (e) {
+        console.warn('[ofd] signatures.xml parse failed', e);
+    }
+    return stampAnnot;
+}
+
+const getSignatureData = async function (zip, signature, signatureID) {
+    const data = await getJsonFromXmlContent(zip, signature);
+    let signedValue = data['json']['ofd:Signature']['ofd:SignedValue'];
+    if (signedValue == null) {
+        return null;
+    }
+    signedValue = normalizeZipPath(replaceFirstSlash(String(signedValue)));
+    if (!getZipEntry(zip, signedValue)) {
+        signedValue = joinZipPath(signature.substring(0, signature.lastIndexOf('/')), signedValue);
+    }
+    if (!getZipEntry(zip, signedValue)) {
+        console.warn('[ofd] SignedValue not found', signedValue);
+        return null;
+    }
+    let sealObj = await parseSesSignature(zip, signedValue, getZipEntry);
+    if (!sealObj || !Object.keys(sealObj).length) {
+        return null;
+    }
+    const signedInfoNode = data['json']['ofd:Signature']['ofd:SignedInfo'] || {};
+    return {
+        'stampAnnot': signedInfoNode['ofd:StampAnnot'],
+        'sealObj': sealObj,
+        'signedInfo': {
+            'signatureID': signatureID,
+            'VerifyRet': sealObj.verifyRet,
+            'Provider': signedInfoNode['ofd:Provider'],
+            'SignatureMethod': signedInfoNode['ofd:SignatureMethod'],
+            'SignatureDateTime': signedInfoNode['ofd:SignatureDateTime'],
+        },
+    };
 }
 
-const getSealDocumentObj = function () {
-    return Promise.resolve([]);
+const getSealDocumentObj = function (stampAnnot) {
+    return new Promise((resolve, reject) => {
+        pipeline.call(this, async () => await unzipOfd(stampAnnot.sealObj.ofdArray), getDocRoots, parseSingleDoc)
+            .then(res => {
+                resolve(res)
+            })
+            .catch(res => {
+                reject(res);
+            });
+    });
 }
 
 const getJsonFromXmlContent = async function (zip, xmlName) {

package/vendor/dltech/ofd/ofd_render.js

@@ -125,6 +125,43 @@ export const calPageBoxScale = function (document, page) {
     return box;
 }
 
+// OFD 的 PathObject/TextObject/Layer 通常通过 DrawParam 引用共享颜色/线宽，
+// 而不是在对象上直接写 ofd:FillColor / ofd:StrokeColor；DrawParam 之间还能通过
+// Relative 相互继承。三处（Layer、PathObject、TextObject）都需要同样的解析规则，
+// 否则引用 DrawParam 取色的对象会因为拿不到颜色而被当成透明，完全不可见。
+const resolveDrawParamStyle = function (drawParamResObj, drawParamId, base) {
+    let fillColor = base?.fillColor ?? null;
+    let strokeColor = base?.strokeColor ?? null;
+    let lineWith = base?.lineWith;
+    if (!drawParamId || !drawParamResObj || !drawParamResObj[drawParamId]) {
+        return { fillColor, strokeColor, lineWith };
+    }
+    let drawParam = drawParamId;
+    if (drawParamResObj[drawParam]['relative']) {
+        drawParam = drawParamResObj[drawParam]['relative'];
+        if (drawParamResObj[drawParam] && drawParamResObj[drawParam]['FillColor']) {
+            fillColor = parseColor(drawParamResObj[drawParam]['FillColor']);
+        }
+        if (drawParamResObj[drawParam] && drawParamResObj[drawParam]['StrokeColor']) {
+            strokeColor = parseColor(drawParamResObj[drawParam]['StrokeColor']);
+        }
+        if (drawParamResObj[drawParam] && drawParamResObj[drawParam]['LineWidth']) {
+            lineWith = converterDpi(drawParamResObj[drawParam]['LineWidth']);
+        }
+        drawParam = drawParamId;
+    }
+    if (drawParamResObj[drawParam]['FillColor']) {
+        fillColor = parseColor(drawParamResObj[drawParam]['FillColor']);
+    }
+    if (drawParamResObj[drawParam]['StrokeColor']) {
+        strokeColor = parseColor(drawParamResObj[drawParam]['StrokeColor']);
+    }
+    if (drawParamResObj[drawParam]['LineWidth']) {
+        lineWith = converterDpi(drawParamResObj[drawParam]['LineWidth']);
+    }
+    return { fillColor, strokeColor, lineWith };
+}
+
 // 根据模板来渲染层节点
 const renderLayerFromTemplate = function (tpls, template, pageDiv, fontResObj, drawParamResObj, multiMediaResObj) {
     let array = [];
@@ -208,9 +245,9 @@ const renderSealPage = function (pageDiv, pages, tpls, isStampAnnot, stampAnnot,
         let divBoundary = converterBox(stampAnnotBoundary);
         let div = document.createElement('div');
         div.setAttribute("name","seal_img_div");
-        div.setAttribute('style', `cursor: pointer; position:relative; left: ${divBoundary.x}px; top: ${divBoundary.y}px; width: ${divBoundary.w}px; height: ${divBoundary.h}px`)
-        div.setAttribute('data-ses-signature', `${JSON.stringify(SES_Signature)}`);
-        div.setAttribute('data-signed-info', `${JSON.stringify(signedInfo)}`);
+        div.setAttribute('style', `cursor: pointer; overflow: hidden; position:absolute; left: ${divBoundary.x}px; top: ${divBoundary.y}px; width: ${divBoundary.w}px; height: ${divBoundary.h}px`)
+        div.setAttribute('data-ses-signature', `${JSON.stringify(SES_Signature || {})}`);
+        div.setAttribute('data-signed-info', `${JSON.stringify(signedInfo || {})}`);
         const template = page[pageId]['json']['ofd:Template'];
         if (template) {
             const layers = tpls[template['@_TemplateID']]['json']['ofd:Content']['ofd:Layer'];
@@ -235,33 +272,14 @@ const renderSealPage = function (pageDiv, pages, tpls, isStampAnnot, stampAnnot,
 }
 
 const renderLayer = function (pageDiv, fontResObj, drawParamResObj, multiMediaResObj, layer, isStampAnnot) {
-    let fillColor = null;
-    let strokeColor = null;
-    let lineWith = converterDpi(0.353);
-    let drawParam = layer?.['@_DrawParam'];
-    if (drawParam && Object.keys(drawParamResObj).length > 0 && drawParamResObj[drawParam]) {
-        if (drawParamResObj[drawParam]['relative']) {
-            drawParam = drawParamResObj[drawParam]['relative'];
-            if (drawParamResObj[drawParam]['FillColor']) {
-                fillColor = parseColor(drawParamResObj[drawParam]['FillColor']);
-            }
-            if (drawParamResObj[drawParam]['StrokeColor']) {
-                strokeColor = parseColor(drawParamResObj[drawParam]['StrokeColor']);
-            }
-            if (drawParamResObj[drawParam]['LineWidth']) {
-                lineWith = converterDpi(drawParamResObj[drawParam]['LineWidth']);
-            }
-        }
-        if (drawParamResObj[drawParam]['FillColor']) {
-            fillColor = parseColor(drawParamResObj[drawParam]['FillColor']);
-        }
-        if (drawParamResObj[drawParam]['StrokeColor']) {
-            strokeColor = parseColor(drawParamResObj[drawParam]['StrokeColor']);
-        }
-        if (drawParamResObj[drawParam]['LineWidth']) {
-            lineWith = converterDpi(drawParamResObj[drawParam]['LineWidth']);
-        }
-    }
+    const layerStyle = resolveDrawParamStyle(drawParamResObj, layer?.['@_DrawParam'], {
+        fillColor: null,
+        strokeColor: null,
+        lineWith: converterDpi(0.353),
+    });
+    let fillColor = layerStyle.fillColor;
+    let strokeColor = layerStyle.strokeColor;
+    let lineWith = layerStyle.lineWith;
     const imageObjects = layer?.['ofd:ImageObject'];
     let imageObjectArray = [];
     imageObjectArray = imageObjectArray.concat(imageObjects);
@@ -285,15 +303,55 @@ const renderLayer = function (pageDiv, fontResObj, drawParamResObj, multiMediaRe
     textObjectArray = textObjectArray.concat(textObjects);
     for (const textObject of textObjectArray) {
         if (textObject) {
-            let svg = renderTextObject(fontResObj, textObject, fillColor, strokeColor);
+            let svg = renderTextObject(drawParamResObj, fontResObj, textObject, fillColor, strokeColor);
             pageDiv.appendChild(svg);
         }
     }
+    const pageBlocks = layer?.['ofd:PageBlock'];
+    let pageBlockArray = [];
+    pageBlockArray = pageBlockArray.concat(pageBlocks);
+    for (const pageBlock of pageBlockArray) {
+        if (pageBlock) {
+            // 部分 OFD（如 OFD R&W 导出的版式）把正文对象包在 PageBlock 里，需递归渲染。
+            renderLayer(pageDiv, fontResObj, drawParamResObj, multiMediaResObj, pageBlock, isStampAnnot);
+        }
+    }
+}
+
+// 部分 OFD 导出工具（如 OFD R&W）会让同一图层内所有图像共享同一个整页 Boundary，
+// 图像的真实位置和尺寸完全由 CTM 决定；此时必须优先按 CTM 计算矩形，否则所有图像会被拉伸铺满整页并互相重叠。
+const parseImageCtm = function (ctm) {
+    if (!ctm) {
+        return null;
+    }
+    const values = String(ctm).trim().split(/\s+/).map(Number);
+    return values.length === 6 && values.every(value => Number.isFinite(value)) ? values : null;
+}
+
+const resolveImageGeometry = function (imageObject) {
+    const boundary = converterBox(parseStBox(imageObject['@_Boundary']));
+    const ctmValues = parseImageCtm(imageObject['@_CTM']);
+    if (!ctmValues) {
+        return { boundary, matrix: null };
+    }
+    const [a, b, c, d, e, f] = ctmValues;
+    const isAxisAligned = Math.abs(b) < 1e-6 && Math.abs(c) < 1e-6;
+    if (isAxisAligned) {
+        // CTM 把单位正方形映射到页面坐标系，a/d 为宽高、e/f 为左上角，单位与 Boundary 一致（mm）。
+        const ctmBoundary = converterBox({
+            x: Math.min(e, e + a),
+            y: Math.min(f, f + d),
+            w: Math.abs(a),
+            h: Math.abs(d),
+        });
+        return { boundary: ctmBoundary, matrix: null };
+    }
+    // 存在旋转/斜切时，退化为整页 Boundary 无法给出正确外框，改用矩阵直接变换单位方块。
+    return { boundary, matrix: ctmValues };
 }
 
 export const renderImageObject = function (pageWidth, pageHeight, multiMediaResObj, imageObject){
-    let boundary = parseStBox(imageObject['@_Boundary']);
-    boundary = converterBox(boundary);
+    const { boundary, matrix } = resolveImageGeometry(imageObject);
     const resId = imageObject['@_ResourceID'];
     const imageResource = multiMediaResObj ? multiMediaResObj[resId] : null;
     if (!imageResource || typeof imageResource !== 'object') {
@@ -304,11 +362,24 @@ export const renderImageObject = function (pageWidth, pageHeight, multiMediaResO
         const width = imageResource.width;
         const height = imageResource.height;
         return renderImageOnCanvas(img, width, height, boundary, imageObject['pfIndex']);
+    } else if (matrix) {
+        return renderImageWithMatrix(imageResource.img, matrix, imageObject['pfIndex']);
     } else {
         return renderImageOnDiv(pageWidth, pageHeight, imageResource.img, boundary, false, false, null, null, imageObject['pfIndex']);
     }
 }
 
+const renderImageWithMatrix = function (imgSrc, ctmValues, oid) {
+    const [a, b, c, d, e, f] = ctmValues;
+    const unit = converterDpi(1);
+    let img = document.createElement('img');
+    img.src = imgSrc;
+    img.setAttribute('width', `${unit}`);
+    img.setAttribute('height', `${unit}`);
+    img.setAttribute('style', `position:absolute;left:0;top:0;transform-origin:0 0;transform:matrix(${a}, ${b}, ${c}, ${d}, ${converterDpi(e)}, ${converterDpi(f)});z-index:${oid}`);
+    return img;
+}
+
 const renderMissingImageObject = function (boundary, oid){
     let div = document.createElement('div');
     div.setAttribute('style', `overflow: hidden; position: absolute; left: ${boundary.x}px; top: ${boundary.y}px; width: ${boundary.w}px; height: ${boundary.h}px;z-index: ${oid}`)
@@ -339,8 +410,8 @@ export const renderImageOnDiv = function (pageWidth, pageHeight, imgSrc, boundar
     if(isStampAnnot)
     {
         div.setAttribute("name","seal_img_div");
-        div.setAttribute('data-ses-signature', `${JSON.stringify(SES_Signature)}`);
-        div.setAttribute('data-signed-info', `${JSON.stringify(signedInfo)}`);
+        div.setAttribute('data-ses-signature', `${JSON.stringify(SES_Signature || {})}`);
+        div.setAttribute('data-signed-info', `${JSON.stringify(signedInfo || {})}`);
     }
     let img = document.createElement('img');
     img.src = imgSrc;
@@ -360,7 +431,7 @@ export const renderImageOnDiv = function (pageWidth, pageHeight, imgSrc, boundar
     return div;
 }
 
-export const renderTextObject = function (fontResObj, textObject, defaultFillColor, defaultStrokeColor) {
+export const renderTextObject = function (drawParamResObj, fontResObj, textObject, defaultFillColor, defaultStrokeColor) {
     let defaultFillOpacity = 1;
     let boundary = parseStBox(textObject['@_Boundary']);
     boundary = converterBox(boundary);
@@ -374,6 +445,12 @@ export const renderTextObject = function (fontResObj, textObject, defaultFillCol
     const textCodePointList = calTextPoint(array);
     let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('version', '1.1');
+    const objectStyle = resolveDrawParamStyle(drawParamResObj, textObject['@_DrawParam'], {
+        fillColor: defaultFillColor,
+        strokeColor: defaultStrokeColor,
+    });
+    defaultFillColor = objectStyle.fillColor;
+    defaultStrokeColor = objectStyle.strokeColor;
     const fillColor = textObject['ofd:FillColor'];
     if (fillColor) {
         defaultFillColor = parseColor(fillColor['@_Value']);
@@ -387,7 +464,7 @@ export const renderTextObject = function (fontResObj, textObject, defaultFillCol
             let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
             text.setAttribute('x', textCodePoint.x);
             text.setAttribute('y', textCodePoint.y);
-            text.innerHTML = textCodePoint.text;
+            text.textContent = textCodePoint.text;
             if (ctm) {
                 const ctms = parseCtm(ctm);
                 text.setAttribute('transform', `matrix(${ctms[0]} ${ctms[1]} ${ctms[2]} ${ctms[3]} ${converterDpi(ctms[4])} ${converterDpi(ctms[5])})`)
@@ -396,10 +473,10 @@ export const renderTextObject = function (fontResObj, textObject, defaultFillCol
                 text.setAttribute('transform', `matrix(${hScale}, 0, 0, 1, ${(1-hScale)*textCodePoint.x}, 0)`)
                 // text.setAttribute('transform-origin', `${textCodePoint.x}`);
             }
-            text.setAttribute('fill', defaultStrokeColor);
-            text.setAttribute('fill', defaultFillColor);
+            const textFillColor = defaultFillColor || defaultStrokeColor || 'rgb(0, 0, 0)';
+            text.setAttribute('fill', textFillColor);
             text.setAttribute('fill-opacity', defaultFillOpacity);
-            text.setAttribute('style', `font-weight: ${weight};font-size:${size}px;font-family: ${getFontFamily(fontResObj[font])};`)
+            text.setAttribute('style', `font-weight: ${weight};font-size:${size}px;font-family: ${getFontFamily(fontResObj[font])};color:${textFillColor};`)
             svg.appendChild(text);
         }
 
@@ -412,6 +489,83 @@ export const renderTextObject = function (fontResObj, textObject, defaultFillCol
     return svg;
 }
 
+const buildSvgPathData = function (points) {
+    let d = '';
+    for (const point of points) {
+        if (point.type === 'M') {
+            d += `M${point.x} ${point.y} `;
+        } else if (point.type === 'L') {
+            d += `L${point.x} ${point.y} `;
+        } else if (point.type === 'Q') {
+            d += `Q${point.x1} ${point.y1} ${point.x2} ${point.y2} `;
+        } else if (point.type === 'B') {
+            d += `C${point.x1} ${point.y1} ${point.x2} ${point.y2} ${point.x3} ${point.y3} `;
+        } else if (point.type === 'C') {
+            d += `Z`;
+        }
+    }
+    return d;
+}
+
+// OFD 的装饰性 PathObject（如色带、圆角背景）经常共用一个近乎整页的 Boundary，
+// 真正可见的形状由 Clips 裁剪出来；不处理 Clips 会让这些路径以整块矩形铺满并
+// 盖住下层图片/文字。Clips 下可以有多个 Clip（依次相交），每个 Clip 下可以有
+// 多个 Area（在该 Clip 内取并集），语义上等价于 SVG 里逐层嵌套 clip-path。
+const appendClipAreaPath = function (clipPathEl, area) {
+    const clipShape = area?.['ofd:Path'];
+    const abbreviatedData = clipShape?.['ofd:AbbreviatedData'];
+    if (!clipShape || !abbreviatedData) {
+        return;
+    }
+    const clipPoints = calPathPoint(convertPathAbbreviatedDatatoPoint(abbreviatedData));
+    const clipPathShape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    clipPathShape.setAttribute('d', buildSvgPathData(clipPoints));
+    const clipCtm = clipShape['@_CTM'];
+    if (clipCtm) {
+        const ctms = parseCtm(clipCtm);
+        clipPathShape.setAttribute('transform', `matrix(${ctms[0]} ${ctms[1]} ${ctms[2]} ${ctms[3]} ${converterDpi(ctms[4])} ${converterDpi(ctms[5])})`);
+    }
+    clipPathEl.appendChild(clipPathShape);
+}
+
+const applyClips = function (svgRoot, contentEl, clips) {
+    const clipList = clips?.['ofd:Clip'];
+    if (!clipList) {
+        return contentEl;
+    }
+    let clipArray = [];
+    clipArray = clipArray.concat(clipList);
+    let defs = null;
+    let current = contentEl;
+    let clipIndex = 0;
+    for (const clip of clipArray) {
+        const areas = clip?.['ofd:Area'];
+        if (!clip || !areas) {
+            continue;
+        }
+        if (!defs) {
+            defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+            svgRoot.appendChild(defs);
+        }
+        const clipPathEl = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
+        const clipId = `ofd-clip-${clipIndex++}-${Math.random().toString(36).slice(2, 8)}`;
+        clipPathEl.setAttribute('id', clipId);
+        let areaArray = [];
+        areaArray = areaArray.concat(areas);
+        for (const area of areaArray) {
+            if (area) {
+                appendClipAreaPath(clipPathEl, area);
+            }
+        }
+        defs.appendChild(clipPathEl);
+        const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        group.setAttribute('clip-path', `url(#${clipId})`);
+        group.appendChild(current);
+        current = group;
+    }
+    return current;
+}
+
 export const renderPathObject = function (drawParamResObj, pathObject, defaultFillColor, defaultStrokeColor, defaultLineWith, isStampAnnot) {
     let boundary = parseStBox(pathObject['@_Boundary']);
     boundary = converterBox(boundary);
@@ -427,11 +581,20 @@ export const renderPathObject = function (drawParamResObj, pathObject, defaultFi
     }
     const drawParam = pathObject['@_DrawParam'];
     if (drawParam) {
-        lineWidth = drawParamResObj[drawParam].LineWidth;
+        lineWidth = drawParamResObj[drawParam]?.LineWidth;
         if (lineWidth) {
             defaultLineWith = converterDpi(lineWidth);
         }
     }
+    // PathObject 自身没有内联 ofd:FillColor/StrokeColor 时，颜色通常来自其引用的 DrawParam；
+    // 先按 DrawParam 解析出默认色，再让内联颜色（若存在）覆盖，否则文字/图形轮廓会因为
+    // 拿不到颜色而按 fill:none 处理，变成不可见。
+    const objectStyle = resolveDrawParamStyle(drawParamResObj, drawParam, {
+        fillColor: defaultFillColor,
+        strokeColor: defaultStrokeColor,
+    });
+    defaultFillColor = objectStyle.fillColor;
+    defaultStrokeColor = objectStyle.strokeColor;
     if (ctm) {
         const ctms = parseCtm(ctm);
         path.setAttribute('transform', `matrix(${ctms[0]} ${ctms[1]} ${ctms[2]} ${ctms[3]} ${converterDpi(ctms[4])} ${converterDpi(ctms[5])})`)
@@ -460,20 +623,8 @@ export const renderPathObject = function (drawParamResObj, pathObject, defaultFi
         fillStyle = `fill:${isStampAnnot ? 'none' : defaultFillColor ? defaultFillColor : 'none'};`;
     }
     path.setAttribute('style', `${strokeStyle};${fillStyle}`)
-    let d = '';
-    for (const point of points) {
-        if (point.type === 'M') {
-            d += `M${point.x} ${point.y} `;
-        } else if (point.type === 'L') {
-            d += `L${point.x} ${point.y} `;
-        } else if (point.type === 'B') {
-            d += `C${point.x1} ${point.y1} ${point.x2} ${point.y2} ${point.x3} ${point.y3} `;
-        } else if (point.type === 'C') {
-            d += `Z`;
-        }
-    }
-    path.setAttribute('d', d);
-    svg.appendChild(path);
+    path.setAttribute('d', buildSvgPathData(points));
+    svg.appendChild(applyClips(svg, path, pathObject['ofd:Clips']));
     let width = isStampAnnot ? boundary.w : Math.ceil(boundary.w);
     let height = isStampAnnot ? boundary.h : Math.ceil(boundary.h);
     let left = boundary.x;