fix: 修复ofd格式解析异常

Author: hexingyu

src/components/HelloWorld.vue

@@ -488,6 +488,7 @@ export default {
           that.loading = false;
         },
         fail(error) {
+          console.log(error)
           that.loading = false;
           that.$alert('OFD打开失败', error, {
             confirmButtonText: '确定',

src/utils/ofd/ofd_parser.js

@@ -309,8 +309,12 @@ const getMultiMediaRes = async function (zip, res, doc) {
                         const jbig2 = await parseJbig2ImageFromZip(zip, file);
                         multiMediaResObj[item['@_ID']] = jbig2;
                     } else {
-                        const img = await parseOtherImageFromZip(zip, file);
-                        multiMediaResObj[item['@_ID']] = {img, 'format': 'png'};
+                        try {
+                            const img = await parseOtherImageFromZip(zip, file);
+                            multiMediaResObj[item['@_ID']] = {img, 'format': 'png'};
+                        } catch (e) {
+                            console.error(e, zip, file)
+                        }
                     }
                 } else {
                     multiMediaResObj[item['@_ID']] = file;

src/utils/ofd/ofd_render.js

@@ -241,15 +241,15 @@ const renderLayer = function (pageDiv, fontResObj, drawParamResObj, multiMediaRe
     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']);
+            const relaDrawParam = drawParamResObj[drawParam]['relative'];
+            if (drawParamResObj[relaDrawParam]['FillColor']) {
+                fillColor = parseColor(drawParamResObj[relaDrawParam]['FillColor']);
             }
-            if (drawParamResObj[drawParam]['StrokeColor']) {
-                strokeColor = parseColor(drawParamResObj[drawParam]['StrokeColor']);
+            if (drawParamResObj[relaDrawParam]['StrokeColor']) {
+                strokeColor = parseColor(drawParamResObj[relaDrawParam]['StrokeColor']);
             }
-            if (drawParamResObj[drawParam]['LineWidth']) {
-                lineWith = converterDpi(drawParamResObj[drawParam]['LineWidth']);
+            if (drawParamResObj[relaDrawParam]['LineWidth']) {
+                lineWith = converterDpi(drawParamResObj[relaDrawParam]['LineWidth']);
             }
         }
         if (drawParamResObj[drawParam]['FillColor']) {
@@ -358,7 +358,7 @@ export const renderTextObject = function (fontResObj, textObject, defaultFillCol
     const hScale = textObject['@_HScale'];
     const font = textObject['@_Font'];
     const weight = textObject['@_Weight'];
-    const size = converterDpi(parseFloat(textObject['@_Size']));
+    const size = converterDpi(parseFloat(textObject['@_Size'])) || 14;
     let array = [];
     array = array.concat(textObject['ofd:TextCode']);
     const textCodePointList = calTextPoint(array);
@@ -375,8 +375,8 @@ export const renderTextObject = function (fontResObj, textObject, defaultFillCol
     for (const textCodePoint of textCodePointList) {
         if (textCodePoint && !isNaN(textCodePoint.x)) {
             let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            text.setAttribute('x', textCodePoint.x);
-            text.setAttribute('y', textCodePoint.y);
+            text.setAttribute('x', textCodePoint.deltaX.join(' '));
+            text.setAttribute('y', textCodePoint.deltaY.join(' '));
             text.innerHTML = textCodePoint.text;
             if (ctm) {
                 const ctms = parseCtm(ctm);

src/utils/ofd/ofd_util.js

@@ -194,24 +194,28 @@ export const calTextPoint = function (textCodes) {
             textStr += '';
             textStr = decodeHtml(textStr);
             textStr = textStr.replace(/ /g, ' ');
-            for (let i = 0; i < textStr.length; i++) {
-                if (i > 0 && deltaXList.length > 0) {
-                    x += deltaXList[(i - 1)];
-                }
-                if (i > 0 && deltaYList.length > 0) {
-                    y += deltaYList[(i - 1)];
-                }
-                let text = textStr.substring(i, i + 1);
-                let filterPointY = textCodePointList.filter((textCodePoint) => {
-                    return textCodePoint.y == converterDpi(y)
-                });
-                if (filterPointY && filterPointY.length) { // Y坐标相同，无需再创建text标签
-                    filterPointY[0].text += text;
-                } else {
-                    let textCodePoint = { 'x': converterDpi(x), 'y': converterDpi(y), 'text': text };
-                    textCodePointList.push(textCodePoint);
-                }
+            const maxLen = Math.max(deltaXList.length, deltaYList.length)
+            let pointX = converterDpi(x)
+            let pointY = converterDpi(y)
+
+            // 修复字间距过宽的问题
+            const xList = [pointX]
+            const yList = [pointY]
+            let posX = parseFloat(pointX)
+            let posY = parseFloat(pointY)
+            for (let i = 0; i < maxLen; i++) {
+                posX += converterDpi(deltaXList[i] || 0)
+                posY += converterDpi(deltaYList[i] || 0)
+                xList.push(posX)
+                yList.push(posY)
             }
+            textCodePointList.push({
+                x: pointX,
+                y: pointY,
+                deltaX: xList,
+                deltaY: yList,
+                text: textStr
+            });
         }
     }
     return textCodePointList;