office-viewer 0.1.3 → 0.1.4

package/lib/render/renderDrawing.js

@@ -14,8 +14,9 @@ var renderCustGeom = require('./renderCustGeom.js');
 /**
  * 渲染图片
  */
-function renderPic(pic, word, drawing) {
-    var _a, _b;
+function renderPic(pic, word, wpg) {
+    var _a, _b, _c;
+    if (wpg === void 0) { wpg = null; }
     var blip = (_a = pic.blipFill) === null || _a === void 0 ? void 0 : _a.blip;
     if (blip && blip.src) {
         var img = document.createElement('img');
@@ -35,15 +36,27 @@ function renderPic(pic, word, drawing) {
         }
         var xfrm = (_b = pic.spPr) === null || _b === void 0 ? void 0 : _b.xfrm;
         if (xfrm) {
-            var off = xfrm.off;
-            if (off) {
-                img.style.left = off.x;
-                img.style.top = off.y;
+            if (wpg) {
+                var rect = getRectInGroup(xfrm, (_c = wpg.spPr) === null || _c === void 0 ? void 0 : _c.xfrm);
+                if (rect) {
+                    img.style.position = 'absolute';
+                    img.style.left = rect.left + 'px';
+                    img.style.top = rect.top + 'px';
+                    img.style.width = rect.width + 'px';
+                    img.style.height = rect.height + 'px';
+                }
             }
-            var ext = xfrm.ext;
-            if (ext) {
-                img.style.width = ext.cx;
-                img.style.height = ext.cy;
+            else {
+                var off = xfrm.off;
+                if (off) {
+                    img.style.left = off.x;
+                    img.style.top = off.y;
+                }
+                var ext = xfrm.ext;
+                if (ext) {
+                    img.style.width = ext.cx;
+                    img.style.height = ext.cy;
+                }
             }
             if (xfrm.rot) {
                 img.style.transform = "rotate(".concat(xfrm.rot, "deg)");
@@ -53,6 +66,162 @@ function renderPic(pic, word, drawing) {
     }
     return null;
 }
+/**
+ * 获取在 group 中的位置
+ * @param xfrm 元素的位置定义
+ *  @param groupXfrm 分组中的位置定义
+ */
+function getRectInGroup(xfrm, groupXfrm) {
+    var off = xfrm.off;
+    var width = parseFloat(xfrm.ext.cx.replace('px', ''));
+    var height = parseFloat(xfrm.ext.cy.replace('px', ''));
+    if (off && groupXfrm.chOff && groupXfrm.ext && groupXfrm.chExt) {
+        // 先算缩放比
+        var scaleX = parseFloat(groupXfrm.ext.cx.replace('px', '')) /
+            parseFloat(groupXfrm.chExt.cx.replace('px', ''));
+        var scaleY = parseFloat(groupXfrm.ext.cy.replace('px', '')) /
+            parseFloat(groupXfrm.chExt.cy.replace('px', ''));
+        var groupOffX = parseFloat(groupXfrm.chOff.x.replace('px', ''));
+        var groupOffY = parseFloat(groupXfrm.chOff.y.replace('px', ''));
+        var x = parseFloat(off.x.replace('px', ''));
+        var y = parseFloat(off.y.replace('px', ''));
+        return {
+            left: scaleX * (x - groupOffX),
+            top: scaleY * (y - groupOffY),
+            width: scaleX * width,
+            height: scaleY * height
+        };
+    }
+    return null;
+}
+/**
+ * 渲染文本框
+ */
+function renderWps(word, container, wps, wpg) {
+    var e_1, _a;
+    var _b;
+    if (wpg === void 0) { wpg = null; }
+    var wpsStyle = wps.wpsStyle;
+    var spPr = wps.spPr;
+    dom.applyStyle(container, wps.style);
+    if (wpsStyle === null || wpsStyle === void 0 ? void 0 : wpsStyle.fontColor) {
+        container.style.color = wpsStyle.fontColor;
+    }
+    if (spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) {
+        var ext = spPr.xfrm.ext;
+        if (ext) {
+            var width = parseFloat(ext.cx.replace('px', ''));
+            var height = parseFloat(ext.cy.replace('px', ''));
+            // 在分组中的计算方式不一样，另外在分组中还需要绝对定位
+            // 这个计算方法在官方文档里没找到
+            if (wpg) {
+                container.style.position = 'absolute';
+                var rect = getRectInGroup(spPr.xfrm, (_b = wpg.spPr) === null || _b === void 0 ? void 0 : _b.xfrm);
+                if (rect) {
+                    container.style.left = rect.left + 'px';
+                    container.style.top = rect.top + 'px';
+                    width = rect.width;
+                    height = rect.height;
+                }
+            }
+            container.style.width = width + 'px';
+            container.style.height = height + 'px';
+            if (spPr.geom) {
+                dom.appendChild(container, renderGeom.renderGeom(spPr.geom, spPr, width, height, wps.wpsStyle));
+            }
+            if (spPr.custGeom) {
+                dom.appendChild(container, renderCustGeom.renderCustGeom(spPr.custGeom, spPr, width, height, wps.wpsStyle));
+            }
+        }
+        if (spPr.xfrm.rot) {
+            container.style.transform = "rotate(".concat(spPr.xfrm.rot, "deg)");
+        }
+    }
+    var txbxContent = wps.txbxContent;
+    if (txbxContent.length) {
+        // 为了实现垂直居中，将父容器改成 table 布局
+        var textContainer = document.createElement('div');
+        textContainer.dataset.name = 'textContainer';
+        container.style.display = 'table';
+        textContainer.style.display = 'table-cell';
+        textContainer.style.verticalAlign = 'middle';
+        if (wps.style && wps.style['vertical-align']) {
+            textContainer.style.verticalAlign = wps.style['vertical-align'];
+            // 容器的 vertical-align 需要去掉，虽然也不影响
+            container.style.verticalAlign = '';
+        }
+        dom.appendChild(container, textContainer);
+        try {
+            for (var txbxContent_1 = tslib.__values(txbxContent), txbxContent_1_1 = txbxContent_1.next(); !txbxContent_1_1.done; txbxContent_1_1 = txbxContent_1.next()) {
+                var txbxContentChild = txbxContent_1_1.value;
+                if (txbxContentChild instanceof Paragraph.Paragraph) {
+                    dom.appendChild(textContainer, renderParagraph["default"](word, txbxContentChild));
+                }
+                else if (txbxContentChild instanceof Table.Table) {
+                    dom.appendChild(textContainer, renderTable["default"](word, txbxContentChild));
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (txbxContent_1_1 && !txbxContent_1_1.done && (_a = txbxContent_1.return)) _a.call(txbxContent_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+}
+function renderWpg(word, wpg) {
+    var e_2, _a, e_3, _b;
+    var _c, _d;
+    var container = document.createElement('div');
+    var wpgContainer = document.createElement('div');
+    var spPr = wpg.spPr;
+    if (spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) {
+        var ext = (_c = spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) === null || _c === void 0 ? void 0 : _c.ext;
+        if (ext) {
+            wpgContainer.style.width = ext.cx;
+            wpgContainer.style.height = ext.cy;
+        }
+        var rot = (_d = spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) === null || _d === void 0 ? void 0 : _d.rot;
+        if (rot) {
+            wpgContainer.style.transform = "rotate(".concat(rot, "deg)");
+        }
+    }
+    try {
+        for (var _e = tslib.__values(wpg.wps), _f = _e.next(); !_f.done; _f = _e.next()) {
+            var wps = _f.value;
+            var wpsContainer = document.createElement('div');
+            renderWps(word, wpsContainer, wps, wpg);
+            dom.appendChild(wpgContainer, wpsContainer);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    try {
+        for (var _g = tslib.__values(wpg.wpg), _h = _g.next(); !_h.done; _h = _g.next()) {
+            var childWpg = _h.value;
+            dom.appendChild(container, renderWpg(word, childWpg));
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    if (wpg.pic) {
+        dom.appendChild(wpgContainer, renderPic(wpg.pic, word, wpg));
+    }
+    dom.appendChild(container, wpgContainer);
+    return container;
+}
 /**
  * 渲染图片，目前只支持 picture
  * http://officeopenxml.com/drwOverview.php
@@ -60,7 +229,6 @@ function renderPic(pic, word, drawing) {
  *
  */
 function renderDrawing(word, drawing, inHeader) {
-    var e_1, _a;
     var container = document.createElement('div');
     if (drawing.position === 'inline') {
         container.style.display = 'inline-block';
@@ -76,66 +244,10 @@ function renderDrawing(word, drawing, inHeader) {
     container.dataset.id = drawing.id || '';
     container.dataset.name = drawing.name || '';
     if (drawing.wps) {
-        var wps = drawing.wps;
-        var wpsStyle = wps.wpsStyle;
-        var spPr = wps.spPr;
-        dom.applyStyle(container, wps.style);
-        if (wpsStyle === null || wpsStyle === void 0 ? void 0 : wpsStyle.fontColor) {
-            container.style.color = wpsStyle.fontColor;
-        }
-        if (spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) {
-            var ext = spPr.xfrm.ext;
-            if (ext) {
-                container.style.width = ext.cx;
-                container.style.height = ext.cy;
-                if (spPr.geom) {
-                    var width = parseFloat(ext.cx.replace('px', ''));
-                    var height = parseFloat(ext.cy.replace('px', ''));
-                    dom.appendChild(container, renderGeom.renderGeom(spPr.geom, spPr, width, height, wps.wpsStyle));
-                }
-                if (spPr.custGeom) {
-                    var width = parseFloat(ext.cx.replace('px', ''));
-                    var height = parseFloat(ext.cy.replace('px', ''));
-                    dom.appendChild(container, renderCustGeom.renderCustGeom(spPr.custGeom, spPr, width, height, wps.wpsStyle));
-                }
-            }
-            if (spPr.xfrm.rot) {
-                container.style.transform = "rotate(".concat(spPr.xfrm.rot, "deg)");
-            }
-        }
-        var txbxContent = wps.txbxContent;
-        if (txbxContent.length) {
-            // 为了实现垂直居中，将父容器改成 table 布局
-            var textContainer = document.createElement('div');
-            textContainer.dataset.name = 'textContainer';
-            container.style.display = 'table';
-            textContainer.style.display = 'table-cell';
-            textContainer.style.verticalAlign = 'middle';
-            if (wps.style && wps.style['vertical-align']) {
-                textContainer.style.verticalAlign = wps.style['vertical-align'];
-                // 容器的 vertical-align 需要去掉，虽然也不影响
-                container.style.verticalAlign = '';
-            }
-            dom.appendChild(container, textContainer);
-            try {
-                for (var txbxContent_1 = tslib.__values(txbxContent), txbxContent_1_1 = txbxContent_1.next(); !txbxContent_1_1.done; txbxContent_1_1 = txbxContent_1.next()) {
-                    var txbxContentChild = txbxContent_1_1.value;
-                    if (txbxContentChild instanceof Paragraph.Paragraph) {
-                        dom.appendChild(textContainer, renderParagraph["default"](word, txbxContentChild));
-                    }
-                    else if (txbxContentChild instanceof Table.Table) {
-                        dom.appendChild(textContainer, renderTable["default"](word, txbxContentChild));
-                    }
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (txbxContent_1_1 && !txbxContent_1_1.done && (_a = txbxContent_1.return)) _a.call(txbxContent_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
-        }
+        renderWps(word, container, drawing.wps);
+    }
+    if (drawing.wpg) {
+        dom.appendChild(container, renderWpg(word, drawing.wpg));
     }
     // 如果没内容就不渲染了，避免高度导致撑开父节点
     if (container.children.length === 0) {

package/lib/render/renderParagraph.js

@@ -12,15 +12,17 @@ var renderHyperLink = require('./renderHyperLink.js');
 var renderBookmark = require('./renderBookmark.js');
 var renderNumbering = require('./renderNumbering.js');
 var setElementStyle = require('./setElementStyle.js');
+var renderTab = require('./renderTab.js');
 var OMath = require('../openxml/math/OMath.js');
 var renderMath = require('./renderMath.js');
+var Tab = require('../openxml/word/Tab.js');
 
 /**
  * 渲染段落
  * @param renderEmptySpace 如果是 true 的话，当内容为空时会自动加上  
  */
 function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
-    var e_1, _a;
+    var e_1, _a, e_2, _b, e_3, _c;
     if (renderEmptySpace === void 0) { renderEmptySpace = true; }
     if (inHeader === void 0) { inHeader = false; }
     word.currentParagraph = paragraph;
@@ -35,9 +37,50 @@ function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
         dom.appendChild(p, renderNumbering.renderNumbering(p, word, properties.numPr));
     }
     var inFldChar = false;
+    if (properties.tabs && properties.tabs.length) {
+        // 目前只支持渲染第一个，因为第二个位置取决于前面内容位置，挺麻烦
+        // 虽然目前这个实现很 hack，但可以支持常见情况
+        dom.appendChild(p, renderTab.renderTab(word, properties.tabs[0], true));
+        // 同时删掉第一个 run 中的 tab
+        var done = false;
+        try {
+            for (var _d = tslib.__values(paragraph.children), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var child = _e.value;
+                if (done) {
+                    break;
+                }
+                if (child instanceof Run.Run) {
+                    try {
+                        for (var _f = (e_2 = void 0, tslib.__values(child.children)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                            var runChild = _g.value;
+                            if (runChild instanceof Tab.Tab) {
+                                child.children.splice(child.children.indexOf(runChild), 1);
+                                done = true;
+                                break;
+                            }
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
     try {
-        for (var _b = tslib.__values(paragraph.children), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var child = _c.value;
+        for (var _h = tslib.__values(paragraph.children), _j = _h.next(); !_j.done; _j = _h.next()) {
+            var child = _j.value;
             if (child instanceof Run.Run) {
                 if (child.fldChar === 'begin') {
                     inFldChar = true;
@@ -62,12 +105,12 @@ function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
             }
         }
     }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
     finally {
         try {
-            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            if (_j && !_j.done && (_c = _h.return)) _c.call(_h);
         }
-        finally { if (e_1) throw e_1.error; }
+        finally { if (e_3) throw e_3.error; }
     }
     // 空行自动加个空格，不然会没高度
     if (p.innerHTML === '' && renderEmptySpace) {

package/lib/render/renderRun.js

@@ -39,12 +39,14 @@ function renderText(span, word, text, paragraph) {
     var _a;
     // 简单过滤一下提升性能
     if (text.indexOf('{{') === -1) {
+        var finalText = void 0;
         if ((_a = paragraph === null || paragraph === void 0 ? void 0 : paragraph.properties) === null || _a === void 0 ? void 0 : _a.autoSpace) {
-            span.textContent = autoSpace.cjkspace(text.split(''));
+            finalText = autoSpace.cjkspace(text.split(''));
         }
         else {
-            span.textContent = text;
+            finalText = text;
         }
+        span.textContent = finalText;
     }
     else {
         span.dataset.originText = text;
@@ -52,6 +54,9 @@ function renderText(span, word, text, paragraph) {
         span.classList.add(VARIABLE_CLASS_NAME);
         span.textContent = word.replaceText(text);
     }
+    // 大于两个空格才转成 nbsp
+    var html = span.innerHTML.split('  ').join('  ');
+    span.innerHTML = html;
 }
 /**
  * 更新文档里的所有变量

package/lib/render/renderStyle.js

@@ -25,7 +25,7 @@ function generateDefaultStyle(word) {
     }
     var hyphens = ((_a = word.settings) === null || _a === void 0 ? void 0 : _a.autoHyphenation) ? 'hyphens: auto;' : '';
     var classPrefix = word.getClassPrefix();
-    return "\n\n\n  /** docDefaults **/\n  .".concat(classPrefix, " {\n    --docx-theme-font-minorHAnsi: Calibri,  Helvetica, Arial, 'Helvetica Neue';\n    --docx-theme-font-minorEastAsia: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti',\n    'Microsoft YaHei';\n  }\n\n  .").concat(classPrefix, " p {\n    margin: 0;\n    padding: 0;\n    line-height: 1.5;\n    ").concat(hyphens, "\n  }\n\n  .").concat(classPrefix, " .justify:after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n\n  .").concat(classPrefix, " table {\n    border-spacing: 0;\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-p {\n    ").concat(defaultPStyle, "\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-r {\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    ").concat(defaultRStyle, "\n  }\n  ");
+    return "\n\n\n  /** docDefaults **/\n  .".concat(classPrefix, " {\n    --docx-theme-font-minorHAnsi: Calibri,  Helvetica, Arial, 'Helvetica Neue';\n    --docx-theme-font-minorEastAsia: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti',\n    'Microsoft YaHei';\n  }\n\n  .").concat(classPrefix, " p {\n    margin: 0;\n    padding: 0;\n    line-height: 1.5;\n    ").concat(hyphens, "\n  }\n\n  .").concat(classPrefix, " .justify:after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n\n  .").concat(classPrefix, " table {\n    border-spacing: 0;\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-p {\n    ").concat(defaultPStyle, "\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-r {\n    overflow-wrap: break-word;\n    ").concat(defaultRStyle, "\n  }\n  ");
 }
 /**
  * 生成表格级别样式

package/lib/render/renderTab.d.ts

@@ -5,4 +5,4 @@ import Word from '../Word';
  * 不支持 tabs 里的自定义宽度，因为要算渲染后的宽度，比较麻烦
  * http://officeopenxml.com/WPtab.php
  */
-export declare function renderTab(word: Word, tab: Tab): HTMLElement;
+export declare function renderTab(word: Word, tab: Tab, renderWidth?: boolean): HTMLElement;

package/lib/render/renderTab.js

@@ -9,12 +9,18 @@ var dom = require('../util/dom.js');
  * 不支持 tabs 里的自定义宽度，因为要算渲染后的宽度，比较麻烦
  * http://officeopenxml.com/WPtab.php
  */
-function renderTab(word, tab) {
+function renderTab(word, tab, renderWidth) {
+    if (renderWidth === void 0) { renderWidth = false; }
     var tabElement = dom.createElement('span');
+    tabElement.style.display = 'inline-block';
+    tabElement.style.width = '2em';
     tabElement.innerHTML = ' ';
     if (tab.leader === 'dot') {
         tabElement.style.borderBottom = '1pt dotted';
     }
+    if (renderWidth && tab.pos && (tab.type === 'start' || tab.type == 'left')) {
+        tabElement.style.width = tab.pos;
+    }
     return tabElement;
 }
 

package/lib/util/get.d.ts

@@ -0,0 +1,4 @@
+/**
+ * https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_get
+ */
+export declare const get: (obj: any, path: string, defaultValue?: undefined) => any;

package/lib/util/get.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_get
+ */
+var get = function (obj, path, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = undefined; }
+    var travel = function (regexp) {
+        return String.prototype.split
+            .call(path, regexp)
+            .filter(Boolean)
+            .reduce(function (res, key) {
+            return res !== null && res !== undefined ? res[key] : res;
+        }, obj);
+    };
+    var result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/);
+    return result === undefined || result === obj ? defaultValue : result;
+};
+
+exports.get = get;

package/lib/util/replaceVar.js

@@ -28,6 +28,7 @@ function replaceText(word, text, data) {
             return String(result);
         }
         else {
+            console.warn('var error: [', text, '] not found in data');
             return '';
         }
     }
@@ -129,7 +130,7 @@ function replaceTableRow(word, tr) {
                     }
                     finally { if (e_5) throw e_5.error; }
                 }
-                table.appendChild(newTr);
+                table.insertBefore(newTr, tr);
             }
         }
         catch (e_3_1) { e_3 = { error: e_3_1 }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "office-viewer",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "office 文档在线预览",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -65,7 +65,6 @@
   },
   "jest": {
     "testEnvironment": "jsdom",
-    "collectCoverage": true,
     "coverageReporters": [
       "text",
       "cobertura"
@@ -99,4 +98,4 @@
       "printBasicPrototype": false
     }
   }
-}
+}