office-viewer 0.1.0 → 0.1.3

package/esm/render/renderRun.js

@@ -1,9 +1,9 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 import { renderBr } from './renderBr.js';
-import { createElement, appendChild } from '../util/dom.js';
+import { createElement, applyStyle, appendChild } from '../util/dom.js';
 import { Text } from '../openxml/word/Run.js';
 import { Break } from '../openxml/word/Break.js';
-import { Drawing } from '../openxml/word/drawing/Drawing.js';
+import { Drawing } from '../openxml/drawing/Drawing.js';
 import { renderDrawing } from './renderDrawing.js';
 import { setElementStyle } from './setElementStyle.js';
 import { Tab } from '../openxml/word/Tab.js';
@@ -17,6 +17,12 @@ import { renderInstrText } from './renderInstrText.js';
 import { Sym } from '../openxml/word/Sym.js';
 import { renderSym } from './renderSym.js';
 import { cjkspace } from '../util/autoSpace.js';
+import { renderSoftHyphen } from './renderSoftHyphen.js';
+import { SoftHyphen } from '../openxml/word/SoftHyphen.js';
+import { NoBreakHyphen } from '../openxml/word/NoBreakHyphen.js';
+import { renderNoBreakHyphen } from './renderNoBreakHyphen.js';
+import { Separator } from '../openxml/word/Separator.js';
+import { renderSeparator } from './renderSeparator.js';
 
 /**
  * run 相关的 http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/Run_1.html
@@ -56,31 +62,41 @@ function updateVariableText(word) {
 }
 /**
  * 渲染 run 节点
+ *
+ * @param inFldChar 是否在 complex field 里，预留功能，目前还不支持
  */
-function renderRun(word, run, paragraph) {
+function renderRun(word, run, paragraph, inFldChar, inHeader) {
     var e_1, _a;
+    var _b, _c;
     var span = createElement('span');
     word.addClass(span, 'r');
     setElementStyle(word, span, run.properties);
+    // run 不好通过 class 来设置 rStyle，所以单独支持一下
+    if ((_b = run.properties) === null || _b === void 0 ? void 0 : _b.rStyle) {
+        var style = word.getStyle(run.properties.rStyle);
+        if ((_c = style === null || style === void 0 ? void 0 : style.rPr) === null || _c === void 0 ? void 0 : _c.cssStyle) {
+            applyStyle(span, style.rPr.cssStyle);
+        }
+    }
     if (run.children.length === 1 && run.children[0] instanceof Text) {
         var text = run.children[0];
         renderText(span, word, text.text, paragraph);
     }
     else {
         try {
-            for (var _b = __values(run.children), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var child = _c.value;
+            for (var _d = __values(run.children), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var child = _e.value;
                 if (child instanceof Text) {
                     var newSpan = createElement('span');
-                    renderText(span, word, child.text, paragraph);
+                    renderText(newSpan, word, child.text, paragraph);
                     appendChild(span, newSpan);
                 }
                 else if (child instanceof Break) {
-                    var br = renderBr(child);
+                    var br = renderBr(word, child);
                     appendChild(span, br);
                 }
                 else if (child instanceof Drawing) {
-                    appendChild(span, renderDrawing(word, child));
+                    appendChild(span, renderDrawing(word, child, inHeader));
                 }
                 else if (child instanceof Tab) {
                     appendChild(span, renderTab(word, child));
@@ -97,6 +113,15 @@ function renderRun(word, run, paragraph) {
                 else if (child instanceof Sym) {
                     appendChild(span, renderSym(word, child));
                 }
+                else if (child instanceof SoftHyphen) {
+                    appendChild(span, renderSoftHyphen());
+                }
+                else if (child instanceof NoBreakHyphen) {
+                    appendChild(span, renderNoBreakHyphen());
+                }
+                else if (child instanceof Separator) {
+                    appendChild(span, renderSeparator());
+                }
                 else {
                     console.warn('unknown child', child);
                 }
@@ -105,7 +130,7 @@ function renderRun(word, run, paragraph) {
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
         finally {
             try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
             }
             finally { if (e_1) throw e_1.error; }
         }

package/esm/render/renderSection.d.ts

@@ -1,6 +1,7 @@
+import { WDocument } from '../openxml/word/WDocument';
 import { Section } from '../openxml/word/Section';
-import Word from '../Word';
+import Word, { WordRenderOptions } from '../Word';
 /**
  * 渲染「节」，在 word 中每个节都可以有自己的页边距和页面大小设置，但目前其实并没有实现分页展现，等后续再考虑
  */
-export declare function renderSection(word: Word, section: Section): HTMLElement;
+export declare function renderSection(word: Word, wDocument: WDocument, section: Section, renderOptions: WordRenderOptions): HTMLElement;

package/esm/render/renderSection.js

@@ -1,25 +1,40 @@
 import { createElement } from '../util/dom.js';
+import { renderHeader } from './renderHeader.js';
 
 /**
  * 渲染「节」，在 word 中每个节都可以有自己的页边距和页面大小设置，但目前其实并没有实现分页展现，等后续再考虑
  */
-function renderSection(word, section) {
+function renderSection(word, wDocument, section, renderOptions) {
     var sectionEl = createElement('section');
     // 用于后续绝对定位
     sectionEl.style.position = 'relative';
+    if (wDocument.backgroundColor) {
+        sectionEl.style.background = wDocument.backgroundColor;
+    }
+    if (renderOptions.page) {
+        if (renderOptions.pageMarginBottom) {
+            sectionEl.style.marginBottom = renderOptions.pageMarginBottom + 'px';
+        }
+        if (renderOptions.pageShadow) {
+            sectionEl.style.boxShadow = '0 0 8px rgba(0, 0, 0, 0.5)';
+        }
+        if (renderOptions.pageBackground) {
+            sectionEl.style.background = renderOptions.pageBackground;
+        }
+    }
     var props = section.properties;
     var pageSize = props.pageSize;
     if (pageSize) {
-        if (!word.renderOptions.ignoreWidth) {
+        if (!renderOptions.ignoreWidth) {
             sectionEl.style.width = pageSize.width;
         }
-        if (!word.renderOptions.ignoreHeight) {
+        if (!renderOptions.ignoreHeight) {
             sectionEl.style.height = pageSize.height;
         }
     }
     // 强制控制 padding
-    if (word.renderOptions.padding) {
-        sectionEl.style.padding = word.renderOptions.padding;
+    if (renderOptions.padding) {
+        sectionEl.style.padding = renderOptions.padding;
     }
     else {
         var pageMargin = props.pageMargin;
@@ -30,6 +45,65 @@ function renderSection(word, section) {
             sectionEl.style.paddingBottom = pageMargin.bottom || '0';
         }
     }
+    if (props.cols) {
+        if (props.cols.num && props.cols.num > 1) {
+            sectionEl.style.columnCount = '' + props.cols.num;
+            if (props.cols.space) {
+                sectionEl.style.columnGap = props.cols.space;
+            }
+        }
+    }
+    word.currentPage++;
+    var width = 'auto';
+    if (props.pageSize && props.pageSize.width) {
+        width = props.pageSize.width;
+    }
+    // 只有在分页模式下才渲染页眉
+    if (props.headers && renderOptions.page && renderOptions.renderHeader) {
+        var headers = props.headers;
+        var headerEl = null;
+        if (headers.even && word.currentPage % 2 === 0) {
+            headerEl = renderHeader(word, headers.even);
+        }
+        else if (headers.default) {
+            headerEl = renderHeader(word, headers.default);
+        }
+        else {
+            console.warn('can not find header', word.currentPage, props.headers);
+        }
+        if (headerEl) {
+            headerEl.style.position = 'absolute';
+            var pageMargin = props.pageMargin;
+            // todo: 在 word 里如果 header 内容较多会将内容区也撑开，但目前实现不了
+            if (pageMargin && pageMargin.header) {
+                headerEl.style.top = pageMargin.header;
+                headerEl.style.width = width;
+            }
+            sectionEl.appendChild(headerEl);
+        }
+    }
+    if (props.footers && renderOptions.page && renderOptions.renderFooter) {
+        var footers = props.footers;
+        var footerEl = null;
+        if (footers.even && word.currentPage % 2 === 0) {
+            footerEl = renderHeader(word, footers.even);
+        }
+        else if (footers.default) {
+            footerEl = renderHeader(word, footers.default);
+        }
+        else {
+            console.warn('can not find footer', word.currentPage, props.footers);
+        }
+        if (footerEl) {
+            footerEl.style.position = 'absolute';
+            var pageMargin = props.pageMargin;
+            if (pageMargin && pageMargin.footer) {
+                footerEl.style.bottom = pageMargin.footer;
+                footerEl.style.width = width;
+            }
+            sectionEl.appendChild(footerEl);
+        }
+    }
     return sectionEl;
 }
 

package/esm/render/renderSeparator.d.ts

@@ -0,0 +1 @@
+export declare function renderSeparator(): HTMLElement;

package/esm/render/renderSeparator.js

@@ -0,0 +1,9 @@
+import { createElement } from '../util/dom.js';
+
+function renderSeparator() {
+    var sep = createElement('hr');
+    sep.style.borderTop = '1pt solid #bbb';
+    return sep;
+}
+
+export { renderSeparator };

package/esm/render/renderSoftHyphen.d.ts

@@ -0,0 +1 @@
+export declare function renderSoftHyphen(): HTMLElement;

package/esm/render/renderSoftHyphen.js

@@ -0,0 +1,9 @@
+import { createElement } from '../util/dom.js';
+
+function renderSoftHyphen() {
+    var softHyphen = createElement('span');
+    softHyphen.innerHTML = '­';
+    return softHyphen;
+}
+
+export { renderSoftHyphen };

package/esm/render/renderStyle.js

@@ -1,5 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
-import { ST_TblStyleOverrideType } from '../openxml/Types.js';
+import { __values } from 'tslib';
 import { styleToText, createElement } from '../util/dom.js';
 
 /**
@@ -9,6 +8,7 @@ import { styleToText, createElement } from '../util/dom.js';
  * 文档基础默认样式
  */
 function generateDefaultStyle(word) {
+    var _a;
     var styles = word.styles;
     var defaultStyle = styles.defaultStyle;
     var defaultPStyle = '';
@@ -19,8 +19,9 @@ function generateDefaultStyle(word) {
     if (defaultStyle === null || defaultStyle === void 0 ? void 0 : defaultStyle.rPr) {
         defaultRStyle = styleToText(defaultStyle.rPr.cssStyle);
     }
+    var hyphens = ((_a = word.settings) === null || _a === void 0 ? void 0 : _a.autoHyphenation) ? 'hyphens: auto;' : '';
     var classPrefix = word.getClassPrefix();
-    return "\n  .".concat(word.wrapClassName, " {\n\n  }\n\n  .").concat(word.wrapClassName, " > article > section {\n    background: white;\n  }\n\n  /** docDefaults **/\n\n  .").concat(classPrefix, " p {\n    margin: 0;\n    padding: 0;\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    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    ").concat(defaultRStyle, "\n  }\n  ");
 }
 /**
  * 生成表格级别样式
@@ -50,81 +51,81 @@ function generateTableStyle(classPrefix, styleDisplayId, style) {
     return tblStyleText;
 }
 // 用于生成表格 override 相关的样式，用于行或列
-function genTblOverrideStyle(prefix, overrideType, tblStylePrStyle) {
+function genTblOverrideStyle(tblPrefix, classPrefix, overrideType, tblStylePrStyle) {
     var _a, _b, _c, _d, _e, _f;
     var styleText = '';
     var trStyle = styleToText((_a = tblStylePrStyle.trPr) === null || _a === void 0 ? void 0 : _a.cssStyle);
     var enableType = '';
     // 在 tblLook 里可以通过这些属性来控制是否启用
     switch (overrideType) {
-        case ST_TblStyleOverrideType.firstCol:
+        case 'firstCol':
             enableType = 'enable-firstColumn';
             break;
-        case ST_TblStyleOverrideType.lastCol:
+        case 'lastCol':
             enableType = 'enable-lastColumn';
             break;
-        case ST_TblStyleOverrideType.firstRow:
+        case 'firstRow':
             enableType = 'enable-firstRow';
             break;
-        case ST_TblStyleOverrideType.lastRow:
+        case 'lastRow':
             enableType = 'enable-lastRow';
             break;
-        case ST_TblStyleOverrideType.band1Horz:
-        case ST_TblStyleOverrideType.band2Horz:
+        case 'band1Horz':
+        case 'band2Horz':
             enableType = 'enable-hBand';
             break;
-        case ST_TblStyleOverrideType.band1Vert:
-        case ST_TblStyleOverrideType.band2Vert:
+        case 'band1Vert':
+        case 'band2Vert':
             enableType = 'enable-vBand';
             break;
     }
     if (trStyle) {
-        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr.").concat(overrideType, "{\n       ").concat(trStyle, "\n    }\n    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr.").concat(overrideType, "{\n       ").concat(trStyle, "\n    }\n    ");
     }
     var tcStyle = styleToText((_b = tblStylePrStyle.tcPr) === null || _b === void 0 ? void 0 : _b.cssStyle);
     if (tcStyle) {
-        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n       ").concat(tcStyle, "\n    }\n    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n       ").concat(tcStyle, "\n    }\n    ");
         if ((_c = tblStylePrStyle.tcPr) === null || _c === void 0 ? void 0 : _c.insideBorder) {
             var insideBorder = (_d = tblStylePrStyle.tcPr) === null || _d === void 0 ? void 0 : _d.insideBorder;
             if (insideBorder.H) {
-                styleText += "\n          ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-top: ").concat(insideBorder.H, ";\n          }");
+                styleText += "\n          ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-top: ").concat(insideBorder.H, ";\n          }");
             }
             if (insideBorder.V) {
                 // 这个主要是为了应对 GridTable5Dark-Accent5 里 firstRow 的情况，它其实有 right 设置，也得去掉
                 if (insideBorder.V === 'none') {
-                    styleText += "\n          ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: none;\n            border-right: none;\n          }");
+                    styleText += "\n          ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: none;\n            border-right: none;\n          }");
                 }
                 else {
-                    styleText += "\n          ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: ").concat(insideBorder.V, ";\n          }");
+                    styleText += "\n          ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: ").concat(insideBorder.V, ";\n          }");
                 }
             }
         }
     }
     var pStyle = styleToText((_e = tblStylePrStyle.pPr) === null || _e === void 0 ? void 0 : _e.cssStyle);
     if (pStyle) {
-        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .p {\n       ").concat(pStyle, "\n    }\n    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .").concat(classPrefix, "-p {\n       ").concat(pStyle, "\n    }\n    ");
     }
     var rStyle = styleToText((_f = tblStylePrStyle.rPr) === null || _f === void 0 ? void 0 : _f.cssStyle);
     if (rStyle) {
-        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .p > .r {\n       ").concat(rStyle, "\n    }\n    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .").concat(classPrefix, "-p > .").concat(classPrefix, "-r {\n       ").concat(rStyle, "\n    }\n    ");
     }
     return styleText;
 }
 // 表格覆盖样式的顺序，权重高的放后面
 var overrideTypeOrder = new Set([
-    ST_TblStyleOverrideType.wholeTable,
-    ST_TblStyleOverrideType.band1Horz,
-    ST_TblStyleOverrideType.band2Horz,
-    ST_TblStyleOverrideType.band1Vert,
-    ST_TblStyleOverrideType.band2Vert,
-    ST_TblStyleOverrideType.firstCol,
-    ST_TblStyleOverrideType.firstRow,
-    ST_TblStyleOverrideType.lastCol,
-    ST_TblStyleOverrideType.lastRow,
-    ST_TblStyleOverrideType.neCell,
-    ST_TblStyleOverrideType.nwCell,
-    ST_TblStyleOverrideType.seCell,
-    ST_TblStyleOverrideType.swCell
+    'wholeTable',
+    'band1Horz',
+    'band2Horz',
+    'band1Vert',
+    'band2Vert',
+    'firstCol',
+    'firstRow',
+    'lastCol',
+    'lastRow',
+    'neCell',
+    'nwCell',
+    'seCell',
+    'swCell'
 ]);
 // 生成表格覆盖样式
 function genOverrideTblStylePr(classPrefix, styleDisplayId, tblStylePr) {
@@ -139,7 +140,7 @@ function genOverrideTblStylePr(classPrefix, styleDisplayId, tblStylePr) {
             var overrideType = overrideTypeOrder_1_1.value;
             if (overrideType in tblStylePr) {
                 var overrideStylePr = tblStylePr[overrideType];
-                tblStylePrText += genTblOverrideStyle(stylePrefix, overrideType, overrideStylePr);
+                tblStylePrText += genTblOverrideStyle(stylePrefix, classPrefix, overrideType, overrideStylePr);
             }
         }
     }
@@ -172,7 +173,7 @@ function generateStyle(word) {
         var rStyleText = '';
         if (styleData.rPr) {
             var rStyle = styleToText(styleData.rPr.cssStyle);
-            rStyleText = "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " > .r {\n        ").concat(rStyle, "\n      }\n      ");
+            rStyleText = "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " > .").concat(classPrefix, "-r {\n        ").concat(rStyle, "\n      }\n      ");
         }
         var tblStyleText = generateTableStyle(classPrefix, styleDisplayId, styleData);
         var tblStylePr = genOverrideTblStylePr(classPrefix, styleDisplayId, styleData.tblStylePr);
@@ -187,7 +188,7 @@ function renderStyle(word) {
     var style = createElement('style');
     var docDefaults = generateDefaultStyle(word);
     var styleText = generateStyle(word);
-    style.innerHTML = "\n  ".concat(docDefaults, "\n\n  ").concat(styleText, "\n  ");
+    style.textContent = "\n  ".concat(docDefaults, "\n\n  ").concat(styleText, "\n  ");
     return style;
 }
 

package/esm/render/renderTab.d.ts

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

package/esm/render/renderTab.js

@@ -1,17 +1,15 @@
-import { ST_TabTlc } from '../openxml/Types.js';
 import { createElement } from '../util/dom.js';
 
 /**
  * 渲染 tab
+ * 不支持 tabs 里的自定义宽度，因为要算渲染后的宽度，比较麻烦
  * http://officeopenxml.com/WPtab.php
  */
 function renderTab(word, tab) {
     var tabElement = createElement('span');
-    tabElement.style.display = 'inline-block';
-    tabElement.style.width = tab.pos;
-    tabElement.innerHTML = ' ';
-    if (tab.leader === ST_TabTlc.dot) {
-        tabElement.style.borderBottom = '1px dotted';
+    tabElement.innerHTML = ' ';
+    if (tab.leader === 'dot') {
+        tabElement.style.borderBottom = '1pt dotted';
     }
     return tabElement;
 }

package/esm/render/renderTable.js

@@ -1,8 +1,7 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
-import { ST_TblStyleOverrideType } from '../openxml/Types.js';
+import { __values } from 'tslib';
 import { Paragraph } from '../openxml/word/Paragraph.js';
 import { Table } from '../openxml/word/Table.js';
-import { addClassName, setStyle, appendChild } from '../util/dom.js';
+import { addClassName, applyStyle, appendChild } from '../util/dom.js';
 import renderParagraph from './renderParagraph.js';
 import { generateTableStyle } from './renderStyle.js';
 import { setElementStyle } from './setElementStyle.js';
@@ -14,51 +13,51 @@ import { setElementStyle } from './setElementStyle.js';
 function setTdClassName(rowIndex, colIndex, rowLength, colLength, element, rowBandSize, colBandSize) {
     // 左上角
     if (rowIndex === 0 && colIndex === 0) {
-        element.classList.add(ST_TblStyleOverrideType.nwCell);
+        element.classList.add('nwCell');
     }
     // 右上角
     if (rowIndex === 0 && colIndex === colLength - 1) {
-        element.classList.add(ST_TblStyleOverrideType.neCell);
+        element.classList.add('neCell');
     }
     // 左下角
     if (rowIndex === rowLength - 1 && colIndex === 0) {
-        element.classList.add(ST_TblStyleOverrideType.swCell);
+        element.classList.add('swCell');
     }
     // 右下角
     if (rowIndex === rowLength - 1 && colIndex === colLength - 1) {
-        element.classList.add(ST_TblStyleOverrideType.seCell);
+        element.classList.add('seCell');
     }
     // 第一行
     if (rowIndex === 0) {
-        element.classList.add(ST_TblStyleOverrideType.firstRow);
+        element.classList.add('firstRow');
     }
     // 最后一行
     if (rowIndex === rowLength - 1) {
-        element.classList.add(ST_TblStyleOverrideType.lastRow);
+        element.classList.add('lastRow');
     }
     // 第一列
     if (colIndex === 0) {
-        element.classList.add(ST_TblStyleOverrideType.firstCol);
+        element.classList.add('firstCol');
     }
     // 最后一列
     if (colIndex === colLength - 1) {
-        element.classList.add(ST_TblStyleOverrideType.lastCol);
+        element.classList.add('lastCol');
     }
     // 奇数行
     if (isOdd(rowIndex + 1)) {
-        element.classList.add(ST_TblStyleOverrideType.band1Horz);
+        element.classList.add('band1Horz');
     }
     // 偶数行
     if (!isOdd(rowIndex + 1)) {
-        element.classList.add(ST_TblStyleOverrideType.band2Horz);
+        element.classList.add('band2Horz');
     }
     // 奇数列
     if (isOdd(colIndex + 1)) {
-        element.classList.add(ST_TblStyleOverrideType.band1Vert);
+        element.classList.add('band1Vert');
     }
     // 偶数列
     if (!isOdd(colIndex + 1)) {
-        element.classList.add(ST_TblStyleOverrideType.band2Vert);
+        element.classList.add('band2Vert');
     }
 }
 /**
@@ -120,7 +119,7 @@ function renderTable(word, table) {
                     setTdClassName(rowIndex, colIndex, table.trs.length, tr.tcs.length, tdEl, properties.rowBandSize, properties.colBandSize);
                     // tr 也能设置 tc style，所以先应用这个
                     if (tr.properties.tcStyle) {
-                        setStyle(tdEl, tr.properties.tcStyle);
+                        applyStyle(tdEl, tr.properties.tcStyle);
                     }
                     var tcPr = tc.properties;
                     setElementStyle(word, tdEl, tcPr);
@@ -130,17 +129,21 @@ function renderTable(word, table) {
                     if (tcPr.rowSpan) {
                         tdEl.rowSpan = tcPr.rowSpan;
                     }
-                    // 如果已经有表格的话，就不再渲染空段落了，避免底部多个空行
-                    var hasTable = false;
+                    var renderSpace = true;
+                    // 如果有 tcPr.hideMark 就不渲染空格
+                    if (tcPr.hideMark) {
+                        renderSpace = false;
+                    }
                     try {
                         for (var _h = (e_3 = void 0, __values(tc.children)), _j = _h.next(); !_j.done; _j = _h.next()) {
                             var tcChild = _j.value;
                             if (tcChild instanceof Paragraph) {
-                                var p = renderParagraph(word, tcChild, !hasTable);
+                                var p = renderParagraph(word, tcChild, renderSpace);
                                 appendChild(tdEl, p);
                             }
                             else if (tcChild instanceof Table) {
-                                hasTable = true;
+                                // 如果已经有表格的话，就不再渲染空段落了，避免底部多个空行
+                                renderSpace = false;
                                 appendChild(tdEl, renderTable(word, tcChild));
                             }
                             else {

package/esm/render/setElementStyle.js

@@ -1,4 +1,4 @@
-import { setStyle, addClassNames } from '../util/dom.js';
+import { applyStyle, addClassName, addClassNames } from '../util/dom.js';
 
 /**
  * 设置元素样式，因为好几个地方用所以统一一下
@@ -8,7 +8,12 @@ function setElementStyle(word, element, properties) {
         return;
     }
     if (properties.cssStyle) {
-        setStyle(element, properties.cssStyle);
+        applyStyle(element, properties.cssStyle);
+        // 需要依赖这个 class 才能实现水平分布
+        // https://stackoverflow.com/a/21199162
+        if (properties.cssStyle['text-align'] === 'justify') {
+            addClassName(element, 'justify');
+        }
     }
     if (properties.pStyle) {
         addClassNames(element, word.getStyleClassName(properties.pStyle));

package/esm/render/zindex.d.ts

@@ -0,0 +1 @@
+export declare const behindIndex = "1";

package/esm/util/blob.js

@@ -1,15 +1,6 @@
 /**
  * 将 blob 转成 data url
  */
-function blobToDataURL(blob) {
-    return new Promise(function (resolve, reject) {
-        var reader = new FileReader();
-        reader.onload = function (_e) { return resolve(reader.result); };
-        reader.onerror = function (_e) { return reject(reader.error); };
-        reader.onabort = function (_e) { return reject(new Error('Read aborted')); };
-        reader.readAsDataURL(blob);
-    });
-}
 /**
  * 下载 blob
  * https://dev.to/nombrekeff/download-file-from-blob-21ho
@@ -36,4 +27,4 @@ function downloadBlob(blob, name) {
     document.body.removeChild(link);
 }
 
-export { blobToDataURL, downloadBlob };
+export { downloadBlob };

package/esm/util/color.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 处理颜色相关的函数，目前只支持 rgb
+ */
+export declare class Color {
+    r: number;
+    g: number;
+    b: number;
+    isValid: boolean;
+    constructor(input: string);
+    static fromHSL(h: number, s: number, l: number): Color;
+    static fromRGB(r: number, g: number, b: number): Color;
+    /**
+     * 设置 lum
+     */
+    lum(l: number): this;
+    /**
+     * 改变 lum 百分比，其实不太对，但差不太多
+     * @param l 百分比，比如 2 相当于 200 %
+     */
+    lumMod(l: number): this;
+    /**
+     * 改变百分比
+     * @param l 百分比，比如 -0.2 相当于减少 20 %
+     */
+    lumOff(l: number): this;
+    /**
+     * h 取值范围是 0-1
+     */
+    hue(h: number): this;
+    hueMod(h: number): this;
+    hueOff(h: number): this;
+    sat(s: number): this;
+    satMod(s: number): this;
+    satOff(s: number): this;
+    /**
+     * 修改 hsl 中某个部分的值
+     */
+    changeHsl(num: number, com: 'h' | 's' | 'l', changeType: 'set' | 'mod' | 'off'): this;
+    /**
+     * 互补色
+     */
+    comp(): this;
+    shade(s: number): void;
+    tint(t: number): void;
+    inv(): this;
+    toHex(): string;
+    toRgba(alpha: number): string;
+}