office-viewer 0.1.0

package/lib/render/renderRun.js

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var renderBr = require('./renderBr.js');
+var dom = require('../util/dom.js');
+var Run = require('../openxml/word/Run.js');
+var Break = require('../openxml/word/Break.js');
+var Drawing = require('../openxml/word/drawing/Drawing.js');
+var renderDrawing = require('./renderDrawing.js');
+var setElementStyle = require('./setElementStyle.js');
+var Tab = require('../openxml/word/Tab.js');
+var renderTab = require('./renderTab.js');
+var renderPict = require('./renderPict.js');
+var Pict = require('../openxml/word/Pict.js');
+var Ruby = require('../openxml/word/Ruby.js');
+var renderRuby = require('./renderRuby.js');
+var InstrText = require('../openxml/word/InstrText.js');
+var renderInstrText = require('./renderInstrText.js');
+var Sym = require('../openxml/word/Sym.js');
+var renderSym = require('./renderSym.js');
+var autoSpace = require('../util/autoSpace.js');
+
+/**
+ * run 相关的 http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/Run_1.html
+ */
+var VARIABLE_CLASS_NAME = 'variable';
+/**
+ * 对文本进行替换
+ */
+function renderText(span, word, text, paragraph) {
+    var _a;
+    // 简单过滤一下提升性能
+    if (text.indexOf('{{') === -1) {
+        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(''));
+        }
+        else {
+            span.textContent = text;
+        }
+    }
+    else {
+        span.dataset.originText = text;
+        // 加个标识，后续可以通过它来查找哪些变量需要替换，这样就不用重新渲染整个文档了
+        span.classList.add(VARIABLE_CLASS_NAME);
+        span.textContent = word.replaceText(text);
+    }
+}
+/**
+ * 更新文档里的所有变量
+ */
+function updateVariableText(word) {
+    var spans = word.rootElement.querySelectorAll(".".concat(VARIABLE_CLASS_NAME));
+    for (var i = 0; i < spans.length; i++) {
+        var span = spans[i];
+        var text = span.dataset.originText || '';
+        span.textContent = word.replaceText(text);
+    }
+}
+/**
+ * 渲染 run 节点
+ */
+function renderRun(word, run, paragraph) {
+    var e_1, _a;
+    var span = dom.createElement('span');
+    word.addClass(span, 'r');
+    setElementStyle.setElementStyle(word, span, run.properties);
+    if (run.children.length === 1 && run.children[0] instanceof Run.Text) {
+        var text = run.children[0];
+        renderText(span, word, text.text, paragraph);
+    }
+    else {
+        try {
+            for (var _b = tslib_es6.__values(run.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                if (child instanceof Run.Text) {
+                    var newSpan = dom.createElement('span');
+                    renderText(span, word, child.text, paragraph);
+                    dom.appendChild(span, newSpan);
+                }
+                else if (child instanceof Break.Break) {
+                    var br = renderBr.renderBr(child);
+                    dom.appendChild(span, br);
+                }
+                else if (child instanceof Drawing.Drawing) {
+                    dom.appendChild(span, renderDrawing.renderDrawing(word, child));
+                }
+                else if (child instanceof Tab.Tab) {
+                    dom.appendChild(span, renderTab.renderTab(word, child));
+                }
+                else if (child instanceof Pict.Pict) {
+                    dom.appendChild(span, renderPict.renderPict(word, child));
+                }
+                else if (child instanceof Ruby.Ruby) {
+                    dom.appendChild(span, renderRuby.renderRuby(word, child));
+                }
+                else if (child instanceof InstrText.InstrText) {
+                    dom.appendChild(span, renderInstrText.renderInstrText(word, child));
+                }
+                else if (child instanceof Sym.Sym) {
+                    dom.appendChild(span, renderSym.renderSym(word, child));
+                }
+                else {
+                    console.warn('unknown child', child);
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+    return span;
+}
+
+exports["default"] = renderRun;
+exports.updateVariableText = updateVariableText;

package/lib/render/renderSection.d.ts

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

package/lib/render/renderSection.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('../util/dom.js');
+
+/**
+ * 渲染「节」，在 word 中每个节都可以有自己的页边距和页面大小设置，但目前其实并没有实现分页展现，等后续再考虑
+ */
+function renderSection(word, section) {
+    var sectionEl = dom.createElement('section');
+    // 用于后续绝对定位
+    sectionEl.style.position = 'relative';
+    var props = section.properties;
+    var pageSize = props.pageSize;
+    if (pageSize) {
+        if (!word.renderOptions.ignoreWidth) {
+            sectionEl.style.width = pageSize.width;
+        }
+        if (!word.renderOptions.ignoreHeight) {
+            sectionEl.style.height = pageSize.height;
+        }
+    }
+    // 强制控制 padding
+    if (word.renderOptions.padding) {
+        sectionEl.style.padding = word.renderOptions.padding;
+    }
+    else {
+        var pageMargin = props.pageMargin;
+        if (pageMargin) {
+            sectionEl.style.paddingLeft = pageMargin.left || '0';
+            sectionEl.style.paddingRight = pageMargin.right || '0';
+            sectionEl.style.paddingTop = pageMargin.top || '0';
+            sectionEl.style.paddingBottom = pageMargin.bottom || '0';
+        }
+    }
+    return sectionEl;
+}
+
+exports.renderSection = renderSection;

package/lib/render/renderStyle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 渲染内置样式及自定义样式
+ */
+import { TblStylePrStyle } from '../openxml/Style';
+import Word from '../Word';
+/**
+ * 生成表格级别样式
+ */
+export declare function generateTableStyle(classPrefix: string, styleDisplayId: string, style: TblStylePrStyle): string;
+/**
+ * 渲染所有样式
+ */
+export declare function renderStyle(word: Word): HTMLStyleElement;

package/lib/render/renderStyle.js

@@ -0,0 +1,199 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var Types = require('../openxml/Types.js');
+var dom = require('../util/dom.js');
+
+/**
+ * 渲染内置样式及自定义样式
+ */
+/**
+ * 文档基础默认样式
+ */
+function generateDefaultStyle(word) {
+    var styles = word.styles;
+    var defaultStyle = styles.defaultStyle;
+    var defaultPStyle = '';
+    if (defaultStyle === null || defaultStyle === void 0 ? void 0 : defaultStyle.pPr) {
+        defaultPStyle = dom.styleToText(defaultStyle.pPr.cssStyle);
+    }
+    var defaultRStyle = '';
+    if (defaultStyle === null || defaultStyle === void 0 ? void 0 : defaultStyle.rPr) {
+        defaultRStyle = dom.styleToText(defaultStyle.rPr.cssStyle);
+    }
+    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  ");
+}
+/**
+ * 生成表格级别样式
+ */
+function generateTableStyle(classPrefix, styleDisplayId, style) {
+    var tblStyleText = '';
+    var tblPr = style.tblPr;
+    var tcPr = style.tcPr;
+    if (tblPr) {
+        var tblStyle = dom.styleToText(tblPr.cssStyle);
+        var tblTcStyle = dom.styleToText(tblPr.tcCSSStyle);
+        tblStyleText += "\n .".concat(classPrefix, " .").concat(styleDisplayId, " {\n  border-collapse: collapse;\n  ").concat(tblStyle, "\n }\n\n .").concat(classPrefix, " .").concat(styleDisplayId, " > tbody > tr > td {\n  ").concat(tblTcStyle, "\n }\n ");
+        if (tblPr.insideBorder) {
+            var insideBorder = tblPr.insideBorder;
+            if (insideBorder.H) {
+                tblStyleText += "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " > tbody > tr > td {\n        border-top: ").concat(insideBorder.H, ";\n      }");
+            }
+            if (insideBorder.V) {
+                tblStyleText += "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " > tbody > tr > td {\n        border-left: ").concat(insideBorder.V, ";\n      }");
+            }
+        }
+    }
+    if (tcPr) {
+        var tcStyle = dom.styleToText(tcPr.cssStyle);
+        tblStyleText += "\n    .".concat(classPrefix, " .").concat(styleDisplayId, " > tbody > tr > td {\n     ").concat(tcStyle, "\n    }\n    ");
+    }
+    return tblStyleText;
+}
+// 用于生成表格 override 相关的样式，用于行或列
+function genTblOverrideStyle(prefix, overrideType, tblStylePrStyle) {
+    var _a, _b, _c, _d, _e, _f;
+    var styleText = '';
+    var trStyle = dom.styleToText((_a = tblStylePrStyle.trPr) === null || _a === void 0 ? void 0 : _a.cssStyle);
+    var enableType = '';
+    // 在 tblLook 里可以通过这些属性来控制是否启用
+    switch (overrideType) {
+        case Types.ST_TblStyleOverrideType.firstCol:
+            enableType = 'enable-firstColumn';
+            break;
+        case Types.ST_TblStyleOverrideType.lastCol:
+            enableType = 'enable-lastColumn';
+            break;
+        case Types.ST_TblStyleOverrideType.firstRow:
+            enableType = 'enable-firstRow';
+            break;
+        case Types.ST_TblStyleOverrideType.lastRow:
+            enableType = 'enable-lastRow';
+            break;
+        case Types.ST_TblStyleOverrideType.band1Horz:
+        case Types.ST_TblStyleOverrideType.band2Horz:
+            enableType = 'enable-hBand';
+            break;
+        case Types.ST_TblStyleOverrideType.band1Vert:
+        case Types.ST_TblStyleOverrideType.band2Vert:
+            enableType = 'enable-vBand';
+            break;
+    }
+    if (trStyle) {
+        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr.").concat(overrideType, "{\n       ").concat(trStyle, "\n    }\n    ");
+    }
+    var tcStyle = dom.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    ");
+        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          }");
+            }
+            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          }");
+                }
+                else {
+                    styleText += "\n          ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: ").concat(insideBorder.V, ";\n          }");
+                }
+            }
+        }
+    }
+    var pStyle = dom.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    ");
+    }
+    var rStyle = dom.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    ");
+    }
+    return styleText;
+}
+// 表格覆盖样式的顺序，权重高的放后面
+var overrideTypeOrder = new Set([
+    Types.ST_TblStyleOverrideType.wholeTable,
+    Types.ST_TblStyleOverrideType.band1Horz,
+    Types.ST_TblStyleOverrideType.band2Horz,
+    Types.ST_TblStyleOverrideType.band1Vert,
+    Types.ST_TblStyleOverrideType.band2Vert,
+    Types.ST_TblStyleOverrideType.firstCol,
+    Types.ST_TblStyleOverrideType.firstRow,
+    Types.ST_TblStyleOverrideType.lastCol,
+    Types.ST_TblStyleOverrideType.lastRow,
+    Types.ST_TblStyleOverrideType.neCell,
+    Types.ST_TblStyleOverrideType.nwCell,
+    Types.ST_TblStyleOverrideType.seCell,
+    Types.ST_TblStyleOverrideType.swCell
+]);
+// 生成表格覆盖样式
+function genOverrideTblStylePr(classPrefix, styleDisplayId, tblStylePr) {
+    var e_1, _a;
+    if (!tblStylePr) {
+        return '';
+    }
+    var tblStylePrText = '';
+    var stylePrefix = ".".concat(classPrefix, " .").concat(styleDisplayId);
+    try {
+        for (var overrideTypeOrder_1 = tslib_es6.__values(overrideTypeOrder), overrideTypeOrder_1_1 = overrideTypeOrder_1.next(); !overrideTypeOrder_1_1.done; overrideTypeOrder_1_1 = overrideTypeOrder_1.next()) {
+            var overrideType = overrideTypeOrder_1_1.value;
+            if (overrideType in tblStylePr) {
+                var overrideStylePr = tblStylePr[overrideType];
+                tblStylePrText += genTblOverrideStyle(stylePrefix, overrideType, overrideStylePr);
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (overrideTypeOrder_1_1 && !overrideTypeOrder_1_1.done && (_a = overrideTypeOrder_1.return)) _a.call(overrideTypeOrder_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return tblStylePrText;
+}
+/**
+ * 生成样式类
+ */
+function generateStyle(word) {
+    var styles = word.styles;
+    var styleMap = styles.styleMap;
+    var classPrefix = word.getClassPrefix();
+    var styleResult = '';
+    for (var styleId in styleMap) {
+        var styleDisplayId = word.getStyleIdDisplayName(styleId);
+        var styleData = styleMap[styleId];
+        var pPr = styleData.pPr;
+        var pStyleText = '';
+        if (pPr) {
+            var pStyle = dom.styleToText(pPr.cssStyle);
+            pStyleText = "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " {\n        ").concat(pStyle, "\n      }\n      ");
+        }
+        var rStyleText = '';
+        if (styleData.rPr) {
+            var rStyle = dom.styleToText(styleData.rPr.cssStyle);
+            rStyleText = "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " > .r {\n        ").concat(rStyle, "\n      }\n      ");
+        }
+        var tblStyleText = generateTableStyle(classPrefix, styleDisplayId, styleData);
+        var tblStylePr = genOverrideTblStylePr(classPrefix, styleDisplayId, styleData.tblStylePr);
+        styleResult += "\n    ".concat(pStyleText, "\n    ").concat(rStyleText, "\n    ").concat(tblStyleText, "\n    ").concat(tblStylePr, "\n    ");
+    }
+    return styleResult;
+}
+/**
+ * 渲染所有样式
+ */
+function renderStyle(word) {
+    var style = dom.createElement('style');
+    var docDefaults = generateDefaultStyle(word);
+    var styleText = generateStyle(word);
+    style.innerHTML = "\n  ".concat(docDefaults, "\n\n  ").concat(styleText, "\n  ");
+    return style;
+}
+
+exports.generateTableStyle = generateTableStyle;
+exports.renderStyle = renderStyle;

package/lib/render/renderSym.d.ts

@@ -0,0 +1,3 @@
+import { Sym } from '../openxml/word/Sym';
+import Word from '../Word';
+export declare function renderSym(word: Word, sym: Sym): HTMLElement;

package/lib/render/renderSym.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('../util/dom.js');
+
+function renderSym(word, sym) {
+    var span = dom.createElement('span');
+    span.style.fontFamily = sym.font;
+    span.innerHTML = "&#x".concat(sym.char, ";");
+    return span;
+}
+
+exports.renderSym = renderSym;

package/lib/render/renderTab.d.ts

@@ -0,0 +1,7 @@
+import { Tab } from '../openxml/word/Tab';
+import Word from '../Word';
+/**
+ * 渲染 tab
+ * http://officeopenxml.com/WPtab.php
+ */
+export declare function renderTab(word: Word, tab: Tab): HTMLElement;

package/lib/render/renderTab.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Types = require('../openxml/Types.js');
+var dom = require('../util/dom.js');
+
+/**
+ * 渲染 tab
+ * http://officeopenxml.com/WPtab.php
+ */
+function renderTab(word, tab) {
+    var tabElement = dom.createElement('span');
+    tabElement.style.display = 'inline-block';
+    tabElement.style.width = tab.pos;
+    tabElement.innerHTML = ' ';
+    if (tab.leader === Types.ST_TabTlc.dot) {
+        tabElement.style.borderBottom = '1px dotted';
+    }
+    return tabElement;
+}
+
+exports.renderTab = renderTab;

package/lib/render/renderTable.d.ts

@@ -0,0 +1,6 @@
+import { Table } from '../openxml/word/Table';
+import Word from '../Word';
+/**
+ * 渲染表格
+ */
+export default function renderTable(word: Word, table: Table): HTMLTableElement;

package/lib/render/renderTable.js

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var Types = require('../openxml/Types.js');
+var Paragraph = require('../openxml/word/Paragraph.js');
+var Table = require('../openxml/word/Table.js');
+var dom = require('../util/dom.js');
+var renderParagraph = require('./renderParagraph.js');
+var renderStyle = require('./renderStyle.js');
+var setElementStyle = require('./setElementStyle.js');
+
+/**
+ * 设置 td 的类，用于支持各种表格条件样式
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/ST_TblStyleOverrideType.html
+ */
+function setTdClassName(rowIndex, colIndex, rowLength, colLength, element, rowBandSize, colBandSize) {
+    // 左上角
+    if (rowIndex === 0 && colIndex === 0) {
+        element.classList.add(Types.ST_TblStyleOverrideType.nwCell);
+    }
+    // 右上角
+    if (rowIndex === 0 && colIndex === colLength - 1) {
+        element.classList.add(Types.ST_TblStyleOverrideType.neCell);
+    }
+    // 左下角
+    if (rowIndex === rowLength - 1 && colIndex === 0) {
+        element.classList.add(Types.ST_TblStyleOverrideType.swCell);
+    }
+    // 右下角
+    if (rowIndex === rowLength - 1 && colIndex === colLength - 1) {
+        element.classList.add(Types.ST_TblStyleOverrideType.seCell);
+    }
+    // 第一行
+    if (rowIndex === 0) {
+        element.classList.add(Types.ST_TblStyleOverrideType.firstRow);
+    }
+    // 最后一行
+    if (rowIndex === rowLength - 1) {
+        element.classList.add(Types.ST_TblStyleOverrideType.lastRow);
+    }
+    // 第一列
+    if (colIndex === 0) {
+        element.classList.add(Types.ST_TblStyleOverrideType.firstCol);
+    }
+    // 最后一列
+    if (colIndex === colLength - 1) {
+        element.classList.add(Types.ST_TblStyleOverrideType.lastCol);
+    }
+    // 奇数行
+    if (isOdd(rowIndex + 1)) {
+        element.classList.add(Types.ST_TblStyleOverrideType.band1Horz);
+    }
+    // 偶数行
+    if (!isOdd(rowIndex + 1)) {
+        element.classList.add(Types.ST_TblStyleOverrideType.band2Horz);
+    }
+    // 奇数列
+    if (isOdd(colIndex + 1)) {
+        element.classList.add(Types.ST_TblStyleOverrideType.band1Vert);
+    }
+    // 偶数列
+    if (!isOdd(colIndex + 1)) {
+        element.classList.add(Types.ST_TblStyleOverrideType.band2Vert);
+    }
+}
+/**
+ * 根据倍数判断是否是奇数，目前看来似乎 word 编辑器也没提供 size 设置
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/tblStyleRowBandSize.html
+ */
+function isOdd(num, size) {
+    return !(num % 2);
+}
+/**
+ * 渲染表格
+ */
+function renderTable(word, table) {
+    var e_1, _a, e_2, _b, e_3, _c;
+    var tableEl = document.createElement('table');
+    var properties = table.properties;
+    if (properties.tblCaption) {
+        var caption = document.createElement('caption');
+        caption.textContent = properties.tblCaption;
+        tableEl.appendChild(caption);
+    }
+    if (properties.tblLook) {
+        for (var key in properties.tblLook) {
+            // 这两个属性是反过来的
+            if (key === 'noHBand') {
+                if (!properties.tblLook[key]) {
+                    dom.addClassName(tableEl, 'enable-hBand');
+                }
+            }
+            else if (key === 'noVBand') {
+                if (!properties.tblLook[key]) {
+                    dom.addClassName(tableEl, 'enable-vBand');
+                }
+            }
+            else if (properties.tblLook[key]) {
+                dom.addClassName(tableEl, 'enable-' + key);
+            }
+        }
+    }
+    setElementStyle.setElementStyle(word, tableEl, properties);
+    var customClass = word.genClassName();
+    tableEl.classList.add(customClass);
+    word.appendStyle(renderStyle.generateTableStyle(word.getClassPrefix(), customClass, { tblPr: properties }));
+    // 这里或许应该生成 classname 来支持 tcCSSStyle
+    var tbody = document.createElement('tbody');
+    tableEl.appendChild(tbody);
+    var rowIndex = 0;
+    try {
+        for (var _d = tslib_es6.__values(table.trs), _e = _d.next(); !_e.done; _e = _d.next()) {
+            var tr = _e.value;
+            var trEl = document.createElement('tr');
+            tbody.appendChild(trEl);
+            var colIndex = 0;
+            try {
+                for (var _f = (e_2 = void 0, tslib_es6.__values(tr.tcs)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var tc = _g.value;
+                    var tdEl = document.createElement('td');
+                    trEl.appendChild(tdEl);
+                    setTdClassName(rowIndex, colIndex, table.trs.length, tr.tcs.length, tdEl, properties.rowBandSize, properties.colBandSize);
+                    // tr 也能设置 tc style，所以先应用这个
+                    if (tr.properties.tcStyle) {
+                        dom.setStyle(tdEl, tr.properties.tcStyle);
+                    }
+                    var tcPr = tc.properties;
+                    setElementStyle.setElementStyle(word, tdEl, tcPr);
+                    if (tcPr.gridSpan) {
+                        tdEl.colSpan = tcPr.gridSpan;
+                    }
+                    if (tcPr.rowSpan) {
+                        tdEl.rowSpan = tcPr.rowSpan;
+                    }
+                    // 如果已经有表格的话，就不再渲染空段落了，避免底部多个空行
+                    var hasTable = false;
+                    try {
+                        for (var _h = (e_3 = void 0, tslib_es6.__values(tc.children)), _j = _h.next(); !_j.done; _j = _h.next()) {
+                            var tcChild = _j.value;
+                            if (tcChild instanceof Paragraph.Paragraph) {
+                                var p = renderParagraph["default"](word, tcChild, !hasTable);
+                                dom.appendChild(tdEl, p);
+                            }
+                            else if (tcChild instanceof Table.Table) {
+                                hasTable = true;
+                                dom.appendChild(tdEl, renderTable(word, tcChild));
+                            }
+                            else {
+                                console.warn('unknown child type: ' + tcChild);
+                            }
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_j && !_j.done && (_c = _h.return)) _c.call(_h);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                    if (tcPr.rowSpan) {
+                        colIndex += tcPr.rowSpan;
+                    }
+                    else {
+                        colIndex++;
+                    }
+                }
+            }
+            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; }
+            }
+            rowIndex++;
+        }
+    }
+    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; }
+    }
+    return tableEl;
+}
+
+exports["default"] = renderTable;

package/lib/render/setElementStyle.d.ts

@@ -0,0 +1,6 @@
+import { Properties } from '../openxml/word/properties/Properties';
+import Word from '../Word';
+/**
+ * 设置元素样式，因为好几个地方用所以统一一下
+ */
+export declare function setElementStyle(word: Word, element: HTMLElement, properties: Properties | undefined): void;

package/lib/render/setElementStyle.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('../util/dom.js');
+
+/**
+ * 设置元素样式，因为好几个地方用所以统一一下
+ */
+function setElementStyle(word, element, properties) {
+    if (!properties) {
+        return;
+    }
+    if (properties.cssStyle) {
+        dom.setStyle(element, properties.cssStyle);
+    }
+    if (properties.pStyle) {
+        dom.addClassNames(element, word.getStyleClassName(properties.pStyle));
+    }
+    if (properties.rStyle) {
+        dom.addClassNames(element, word.getStyleClassName(properties.rStyle));
+    }
+}
+
+exports.setElementStyle = setElementStyle;

package/lib/util/autoSpace.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 中英文间自动加空格，基于下面代码改的，去掉了 lodash 依赖
+ * https://gist.github.com/wyl8899/e0f31068681023480e20c34f6b19a275
+ */
+export declare const cjkspace: (strings: string[]) => string;