office-viewer 0.1.0 → 0.1.3

package/lib/render/renderPict.js

@@ -6,16 +6,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * 老的 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/lib/render/renderRuby.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var dom = require('../util/dom.js');
 var renderRun = require('./renderRun.js');
 
@@ -14,7 +14,7 @@ function renderRuby(word, ruby) {
     var rubyElement = dom.createElement('ruby');
     if (ruby.rubyBase) {
         try {
-            for (var _c = tslib_es6.__values(ruby.rubyBase.children), _d = _c.next(); !_d.done; _d = _c.next()) {
+            for (var _c = tslib.__values(ruby.rubyBase.children), _d = _c.next(); !_d.done; _d = _c.next()) {
                 var text = _d.value;
                 rubyElement.appendChild(renderRun["default"](word, text));
             }
@@ -33,7 +33,7 @@ function renderRuby(word, ruby) {
             rubyElement.appendChild(rpStart);
             var rtElement = dom.createElement('rt');
             try {
-                for (var _e = tslib_es6.__values(ruby.rt.children), _f = _e.next(); !_f.done; _f = _e.next()) {
+                for (var _e = tslib.__values(ruby.rt.children), _f = _e.next(); !_f.done; _f = _e.next()) {
                     var text = _f.value;
                     rtElement.appendChild(renderRun["default"](word, text));
                 }

package/lib/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/lib/render/renderRun.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 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 Drawing = require('../openxml/drawing/Drawing.js');
 var renderDrawing = require('./renderDrawing.js');
 var setElementStyle = require('./setElementStyle.js');
 var Tab = require('../openxml/word/Tab.js');
@@ -21,6 +21,12 @@ var renderInstrText = require('./renderInstrText.js');
 var Sym = require('../openxml/word/Sym.js');
 var renderSym = require('./renderSym.js');
 var autoSpace = require('../util/autoSpace.js');
+var renderSoftHyphen = require('./renderSoftHyphen.js');
+var SoftHyphen = require('../openxml/word/SoftHyphen.js');
+var NoBreakHyphen = require('../openxml/word/NoBreakHyphen.js');
+var renderNoBreakHyphen = require('./renderNoBreakHyphen.js');
+var Separator = require('../openxml/word/Separator.js');
+var renderSeparator = require('./renderSeparator.js');
 
 /**
  * run 相关的 http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/Run_1.html
@@ -60,31 +66,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 = dom.createElement('span');
     word.addClass(span, 'r');
     setElementStyle.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) {
+            dom.applyStyle(span, style.rPr.cssStyle);
+        }
+    }
     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;
+            for (var _d = tslib.__values(run.children), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var child = _e.value;
                 if (child instanceof Run.Text) {
                     var newSpan = dom.createElement('span');
-                    renderText(span, word, child.text, paragraph);
+                    renderText(newSpan, word, child.text, paragraph);
                     dom.appendChild(span, newSpan);
                 }
                 else if (child instanceof Break.Break) {
-                    var br = renderBr.renderBr(child);
+                    var br = renderBr.renderBr(word, child);
                     dom.appendChild(span, br);
                 }
                 else if (child instanceof Drawing.Drawing) {
-                    dom.appendChild(span, renderDrawing.renderDrawing(word, child));
+                    dom.appendChild(span, renderDrawing.renderDrawing(word, child, inHeader));
                 }
                 else if (child instanceof Tab.Tab) {
                     dom.appendChild(span, renderTab.renderTab(word, child));
@@ -101,6 +117,15 @@ function renderRun(word, run, paragraph) {
                 else if (child instanceof Sym.Sym) {
                     dom.appendChild(span, renderSym.renderSym(word, child));
                 }
+                else if (child instanceof SoftHyphen.SoftHyphen) {
+                    dom.appendChild(span, renderSoftHyphen.renderSoftHyphen());
+                }
+                else if (child instanceof NoBreakHyphen.NoBreakHyphen) {
+                    dom.appendChild(span, renderNoBreakHyphen.renderNoBreakHyphen());
+                }
+                else if (child instanceof Separator.Separator) {
+                    dom.appendChild(span, renderSeparator.renderSeparator());
+                }
                 else {
                     console.warn('unknown child', child);
                 }
@@ -109,7 +134,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/lib/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/lib/render/renderSection.js

@@ -3,27 +3,42 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var dom = require('../util/dom.js');
+var renderHeader = require('./renderHeader.js');
 
 /**
  * 渲染「节」，在 word 中每个节都可以有自己的页边距和页面大小设置，但目前其实并没有实现分页展现，等后续再考虑
  */
-function renderSection(word, section) {
+function renderSection(word, wDocument, section, renderOptions) {
     var sectionEl = dom.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;
@@ -34,6 +49,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.renderHeader(word, headers.even);
+        }
+        else if (headers.default) {
+            headerEl = renderHeader.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.renderHeader(word, footers.even);
+        }
+        else if (footers.default) {
+            footerEl = renderHeader.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/lib/render/renderSeparator.d.ts

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

package/lib/render/renderSeparator.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('../util/dom.js');
+
+function renderSeparator() {
+    var sep = dom.createElement('hr');
+    sep.style.borderTop = '1pt solid #bbb';
+    return sep;
+}
+
+exports.renderSeparator = renderSeparator;

package/lib/render/renderSoftHyphen.d.ts

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

package/lib/render/renderSoftHyphen.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('../util/dom.js');
+
+function renderSoftHyphen() {
+    var softHyphen = dom.createElement('span');
+    softHyphen.innerHTML = '­';
+    return softHyphen;
+}
+
+exports.renderSoftHyphen = renderSoftHyphen;

package/lib/render/renderStyle.js

@@ -2,8 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
-var Types = require('../openxml/Types.js');
+var tslib = require('tslib');
 var dom = require('../util/dom.js');
 
 /**
@@ -13,6 +12,7 @@ var dom = require('../util/dom.js');
  * 文档基础默认样式
  */
 function generateDefaultStyle(word) {
+    var _a;
     var styles = word.styles;
     var defaultStyle = styles.defaultStyle;
     var defaultPStyle = '';
@@ -23,8 +23,9 @@ function generateDefaultStyle(word) {
     if (defaultStyle === null || defaultStyle === void 0 ? void 0 : defaultStyle.rPr) {
         defaultRStyle = dom.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  ");
 }
 /**
  * 生成表格级别样式
@@ -54,81 +55,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 = dom.styleToText((_a = tblStylePrStyle.trPr) === null || _a === void 0 ? void 0 : _a.cssStyle);
     var enableType = '';
     // 在 tblLook 里可以通过这些属性来控制是否启用
     switch (overrideType) {
-        case Types.ST_TblStyleOverrideType.firstCol:
+        case 'firstCol':
             enableType = 'enable-firstColumn';
             break;
-        case Types.ST_TblStyleOverrideType.lastCol:
+        case 'lastCol':
             enableType = 'enable-lastColumn';
             break;
-        case Types.ST_TblStyleOverrideType.firstRow:
+        case 'firstRow':
             enableType = 'enable-firstRow';
             break;
-        case Types.ST_TblStyleOverrideType.lastRow:
+        case 'lastRow':
             enableType = 'enable-lastRow';
             break;
-        case Types.ST_TblStyleOverrideType.band1Horz:
-        case Types.ST_TblStyleOverrideType.band2Horz:
+        case 'band1Horz':
+        case 'band2Horz':
             enableType = 'enable-hBand';
             break;
-        case Types.ST_TblStyleOverrideType.band1Vert:
-        case Types.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 = 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    ");
+        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 = 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    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .").concat(classPrefix, "-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    ");
+        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([
-    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
+    'wholeTable',
+    'band1Horz',
+    'band2Horz',
+    'band1Vert',
+    'band2Vert',
+    'firstCol',
+    'firstRow',
+    'lastCol',
+    'lastRow',
+    'neCell',
+    'nwCell',
+    'seCell',
+    'swCell'
 ]);
 // 生成表格覆盖样式
 function genOverrideTblStylePr(classPrefix, styleDisplayId, tblStylePr) {
@@ -139,11 +140,11 @@ function genOverrideTblStylePr(classPrefix, styleDisplayId, tblStylePr) {
     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()) {
+        for (var overrideTypeOrder_1 = tslib.__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);
+                tblStylePrText += genTblOverrideStyle(stylePrefix, classPrefix, overrideType, overrideStylePr);
             }
         }
     }
@@ -176,7 +177,7 @@ function generateStyle(word) {
         var rStyleText = '';
         if (styleData.rPr) {
             var rStyle = dom.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);
@@ -191,7 +192,7 @@ 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  ");
+    style.textContent = "\n  ".concat(docDefaults, "\n\n  ").concat(styleText, "\n  ");
     return style;
 }
 

package/lib/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/lib/render/renderTab.js

@@ -2,20 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Types = require('../openxml/Types.js');
 var dom = require('../util/dom.js');
 
 /**
  * 渲染 tab
+ * 不支持 tabs 里的自定义宽度，因为要算渲染后的宽度，比较麻烦
  * 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';
+    tabElement.innerHTML = ' ';
+    if (tab.leader === 'dot') {
+        tabElement.style.borderBottom = '1pt dotted';
     }
     return tabElement;
 }