office-viewer 0.1.0 → 0.1.4

package/esm/render/renderParagraph.js

@@ -1,4 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 import { createElement, appendChild } from '../util/dom.js';
 import { Run } from '../openxml/word/Run.js';
 import { BookmarkStart } from '../openxml/word/Bookmark.js';
@@ -9,45 +9,82 @@ import { renderBookmarkStart } from './renderBookmark.js';
 import { renderNumbering } from './renderNumbering.js';
 import { setElementStyle } from './setElementStyle.js';
 import { renderTab } from './renderTab.js';
-import { SmartTag } from '../openxml/word/SmartTag.js';
-import renderInlineText from './renderInlineText.js';
+import { OMath } from '../openxml/math/OMath.js';
+import { renderOMath } from './renderMath.js';
+import { Tab } from '../openxml/word/Tab.js';
 
 /**
  * 渲染段落
  * @param renderEmptySpace 如果是 true 的话，当内容为空时会自动加上  
  */
-function renderParagraph(word, paragraph, renderEmptySpace) {
-    var e_1, _a, e_2, _b;
+function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
+    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;
     var p = createElement('p');
     word.addClass(p, 'p');
     var properties = paragraph.properties;
     setElementStyle(word, p, properties);
+    // 默认情况下 drawing 是相对段落的
+    p.style.position = 'relative';
     // 渲染列表前缀
     if (properties.numPr) {
         appendChild(p, renderNumbering(p, word, properties.numPr));
     }
-    if (properties.tabs) {
+    var inFldChar = false;
+    if (properties.tabs && properties.tabs.length) {
+        // 目前只支持渲染第一个，因为第二个位置取决于前面内容位置，挺麻烦
+        // 虽然目前这个实现很 hack，但可以支持常见情况
+        appendChild(p, renderTab(word, properties.tabs[0], true));
+        // 同时删掉第一个 run 中的 tab
+        var done = false;
         try {
-            for (var _c = __values(properties.tabs), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var tab = _d.value;
-                appendChild(p, renderTab(word, tab));
+            for (var _d = __values(paragraph.children), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var child = _e.value;
+                if (done) {
+                    break;
+                }
+                if (child instanceof Run) {
+                    try {
+                        for (var _f = (e_2 = void 0, __values(child.children)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                            var runChild = _g.value;
+                            if (runChild instanceof 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 (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
             }
             finally { if (e_1) throw e_1.error; }
         }
     }
     try {
-        for (var _e = __values(paragraph.children), _f = _e.next(); !_f.done; _f = _e.next()) {
-            var child = _f.value;
+        for (var _h = __values(paragraph.children), _j = _h.next(); !_j.done; _j = _h.next()) {
+            var child = _j.value;
             if (child instanceof Run) {
-                appendChild(p, renderRun(word, child, paragraph));
+                if (child.fldChar === 'begin') {
+                    inFldChar = true;
+                }
+                else if (child) {
+                    inFldChar = false;
+                }
+                appendChild(p, renderRun(word, child, paragraph, inFldChar, inHeader));
             }
             else if (child instanceof BookmarkStart) {
                 appendChild(p, renderBookmarkStart(word, child));
@@ -56,17 +93,20 @@ function renderParagraph(word, paragraph, renderEmptySpace) {
                 var hyperlink = renderHyperLink(word, child, paragraph);
                 appendChild(p, hyperlink);
             }
-            else if (child instanceof SmartTag) {
-                renderInlineText(word, child, p);
+            else if (child instanceof OMath) {
+                appendChild(p, renderOMath(word, child));
+            }
+            else {
+                console.warn('unknow pargraph type', child);
             }
         }
     }
-    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
     finally {
         try {
-            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+            if (_j && !_j.done && (_c = _h.return)) _c.call(_h);
         }
-        finally { if (e_2) throw e_2.error; }
+        finally { if (e_3) throw e_3.error; }
     }
     // 空行自动加个空格，不然会没高度
     if (p.innerHTML === '' && renderEmptySpace) {

package/esm/render/renderPict.js

@@ -2,16 +2,11 @@
  * 老的 vml 格式，目前只支持图片
  */
 function renderPict(word, pict) {
-    var _a;
-    if (pict.imagedata) {
-        var img_1 = document.createElement('img');
-        img_1.style.position = 'relative';
-        (_a = word.loadImage(pict.imagedata)) === null || _a === void 0 ? void 0 : _a.then(function (url) {
-            if (url) {
-                img_1.src = url;
-            }
-        });
-        return img_1;
+    if (pict.src) {
+        var img = document.createElement('img');
+        img.style.position = 'relative';
+        img.src = pict.src;
+        return img;
     }
     return null;
 }

package/esm/render/renderRuby.js

@@ -1,4 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 import { createElement } from '../util/dom.js';
 import renderRun from './renderRun.js';
 

package/esm/render/renderRun.d.ts

@@ -3,12 +3,14 @@
  */
 import Word from '../Word';
 import { Run } from '../openxml/word/Run';
-import type { Paragraph } from './../openxml/word/Paragraph';
+import type { Paragraph } from '../openxml/word/Paragraph';
 /**
  * 更新文档里的所有变量
  */
 export declare function updateVariableText(word: Word): void;
 /**
  * 渲染 run 节点
+ *
+ * @param inFldChar 是否在 complex field 里，预留功能，目前还不支持
  */
-export default function renderRun(word: Word, run: Run, paragraph?: Paragraph): HTMLElement;
+export default function renderRun(word: Word, run: Run, paragraph?: Paragraph, inFldChar?: boolean, inHeader?: boolean): HTMLElement;

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
@@ -29,12 +35,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 = cjkspace(text.split(''));
+            finalText = cjkspace(text.split(''));
         }
         else {
-            span.textContent = text;
+            finalText = text;
         }
+        span.textContent = finalText;
     }
     else {
         span.dataset.originText = text;
@@ -42,6 +50,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;
 }
 /**
  * 更新文档里的所有变量
@@ -56,31 +67,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 +118,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 +135,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    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;
+export declare function renderTab(word: Word, tab: Tab, renderWidth?: boolean): HTMLElement;

package/esm/render/renderTab.js

@@ -1,17 +1,21 @@
-import { ST_TabTlc } from '../openxml/Types.js';
 import { createElement } from '../util/dom.js';
 
 /**
  * 渲染 tab
+ * 不支持 tabs 里的自定义宽度，因为要算渲染后的宽度，比较麻烦
  * http://officeopenxml.com/WPtab.php
  */
-function renderTab(word, tab) {
+function renderTab(word, tab, renderWidth) {
+    if (renderWidth === void 0) { renderWidth = false; }
     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.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;
 }