office-viewer 0.2.0 → 0.3.0

package/esm/word/render/renderRun.js

@@ -0,0 +1,146 @@
+import { __values } from 'tslib';
+import { renderBr } from './renderBr.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/drawing/Drawing.js';
+import { renderDrawing } from './renderDrawing.js';
+import { setElementStyle } from './setElementStyle.js';
+import { Tab } from '../../openxml/word/Tab.js';
+import { renderTab } from './renderTab.js';
+import { renderPict } from './renderPict.js';
+import { Pict } from '../../openxml/word/Pict.js';
+import { Ruby } from '../../openxml/word/Ruby.js';
+import { renderRuby } from './renderRuby.js';
+import { InstrText } from '../../openxml/word/InstrText.js';
+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
+ */
+var VARIABLE_CLASS_NAME = 'variable';
+/**
+ * 对文本进行替换
+ */
+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) {
+            finalText = cjkspace(text.split(''));
+        }
+        else {
+            finalText = text;
+        }
+        span.textContent = finalText;
+    }
+    else {
+        span.dataset.originText = text;
+        // 加个标识，后续可以通过它来查找哪些变量需要替换，这样就不用重新渲染整个文档了
+        span.classList.add(VARIABLE_CLASS_NAME);
+        span.textContent = word.replaceText(text);
+    }
+    // 大于两个空格才转成 nbsp
+    var html = span.innerHTML.split('  ').join('  ');
+    span.innerHTML = html;
+}
+/**
+ * 更新文档里的所有变量
+ */
+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 节点
+ *
+ * @param inFldChar 是否在 complex field 里，预留功能，目前还不支持
+ */
+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 _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(newSpan, word, child.text, paragraph);
+                    appendChild(span, newSpan);
+                }
+                else if (child instanceof Break) {
+                    var br = renderBr(word, child);
+                    appendChild(span, br);
+                }
+                else if (child instanceof Drawing) {
+                    appendChild(span, renderDrawing(word, child, inHeader));
+                }
+                else if (child instanceof Tab) {
+                    appendChild(span, renderTab(word, child));
+                }
+                else if (child instanceof Pict) {
+                    appendChild(span, renderPict(word, child));
+                }
+                else if (child instanceof Ruby) {
+                    appendChild(span, renderRuby(word, child));
+                }
+                else if (child instanceof InstrText) {
+                    appendChild(span, renderInstrText(word, child));
+                }
+                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);
+                }
+            }
+        }
+        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 span;
+}
+
+export { renderRun as default, updateVariableText };

package/esm/word/render/renderSection.d.ts

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

package/esm/word/render/renderSection.js

@@ -0,0 +1,110 @@
+import { createElement } from '../../util/dom.js';
+import { renderHeader } from './renderHeader.js';
+
+/**
+ * 渲染「节」，在 word 中每个节都可以有自己的页边距和页面大小设置，但目前其实并没有实现分页展现，等后续再考虑
+ */
+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 (!renderOptions.ignoreWidth) {
+            sectionEl.style.width = pageSize.width;
+        }
+        if (!renderOptions.ignoreHeight) {
+            sectionEl.style.height = pageSize.height;
+        }
+    }
+    // 强制控制 padding
+    if (renderOptions.padding) {
+        sectionEl.style.padding = 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';
+        }
+    }
+    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;
+}
+
+export { renderSection };

package/esm/word/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/word/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/word/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/esm/word/render/renderStyle.js

@@ -0,0 +1,195 @@
+import { __values } from 'tslib';
+import { styleToText, createElement } from '../../util/dom.js';
+
+/**
+ * 渲染内置样式及自定义样式
+ */
+/**
+ * 文档基础默认样式
+ */
+function generateDefaultStyle(word) {
+    var _a;
+    var styles = word.styles;
+    var defaultStyle = styles.defaultStyle;
+    var defaultPStyle = '';
+    if (defaultStyle === null || defaultStyle === void 0 ? void 0 : defaultStyle.pPr) {
+        defaultPStyle = styleToText(defaultStyle.pPr.cssStyle);
+    }
+    var defaultRStyle = '';
+    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\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 {\n    text-align-last: left;\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  ");
+}
+/**
+ * 生成表格级别样式
+ */
+function generateTableStyle(classPrefix, styleDisplayId, style) {
+    var tblStyleText = '';
+    var tblPr = style.tblPr;
+    var tcPr = style.tcPr;
+    if (tblPr) {
+        var tblStyle = styleToText(tblPr.cssStyle);
+        var tblTcStyle = 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 = styleToText(tcPr.cssStyle);
+        tblStyleText += "\n    .".concat(classPrefix, " .").concat(styleDisplayId, " > tbody > tr > td {\n     ").concat(tcStyle, "\n    }\n    ");
+    }
+    return tblStyleText;
+}
+// 用于生成表格 override 相关的样式，用于行或列
+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 'firstCol':
+            enableType = 'enable-firstColumn';
+            break;
+        case 'lastCol':
+            enableType = 'enable-lastColumn';
+            break;
+        case 'firstRow':
+            enableType = 'enable-firstRow';
+            break;
+        case 'lastRow':
+            enableType = 'enable-lastRow';
+            break;
+        case 'band1Horz':
+        case 'band2Horz':
+            enableType = 'enable-hBand';
+            break;
+        case 'band1Vert':
+        case 'band2Vert':
+            enableType = 'enable-vBand';
+            break;
+    }
+    if (trStyle) {
+        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(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(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(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: none;\n            border-right: none;\n          }");
+                }
+                else {
+                    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(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(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([
+    'wholeTable',
+    'band1Horz',
+    'band2Horz',
+    'band1Vert',
+    'band2Vert',
+    'firstCol',
+    'firstRow',
+    'lastCol',
+    'lastRow',
+    'neCell',
+    'nwCell',
+    'seCell',
+    '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 = __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, classPrefix, 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 = styleToText(pPr.cssStyle);
+            pStyleText = "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " {\n        ").concat(pStyle, "\n      }\n      ");
+        }
+        var rStyleText = '';
+        if (styleData.rPr) {
+            var rStyle = styleToText(styleData.rPr.cssStyle);
+            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);
+        styleResult += "\n    ".concat(pStyleText, "\n    ").concat(rStyleText, "\n    ").concat(tblStyleText, "\n    ").concat(tblStylePr, "\n    ");
+    }
+    return styleResult;
+}
+/**
+ * 渲染所有样式
+ */
+function renderStyle(word) {
+    var style = createElement('style');
+    var docDefaults = generateDefaultStyle(word);
+    var styleText = generateStyle(word);
+    style.textContent = "\n  ".concat(docDefaults, "\n\n  ").concat(styleText, "\n  ");
+    return style;
+}
+
+export { generateTableStyle, renderStyle };

package/esm/word/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/esm/word/render/renderSym.js

@@ -0,0 +1,10 @@
+import { createElement } from '../../util/dom.js';
+
+function renderSym(word, sym) {
+    var span = createElement('span');
+    span.style.fontFamily = sym.font;
+    span.innerHTML = "&#x".concat(sym.char, ";");
+    return span;
+}
+
+export { renderSym };

package/esm/word/render/renderTab.d.ts

@@ -0,0 +1,8 @@
+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, renderWidth?: boolean): HTMLElement;

package/esm/word/render/renderTab.js

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

package/esm/word/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;