office-viewer 0.1.0 → 0.1.4

package/lib/render/renderParagraph.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 Run = require('../openxml/word/Run.js');
 var Bookmark = require('../openxml/word/Bookmark.js');
@@ -13,45 +13,82 @@ var renderBookmark = require('./renderBookmark.js');
 var renderNumbering = require('./renderNumbering.js');
 var setElementStyle = require('./setElementStyle.js');
 var renderTab = require('./renderTab.js');
-var SmartTag = require('../openxml/word/SmartTag.js');
-var renderInlineText = require('./renderInlineText.js');
+var OMath = require('../openxml/math/OMath.js');
+var renderMath = require('./renderMath.js');
+var Tab = require('../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 = dom.createElement('p');
     word.addClass(p, 'p');
     var properties = paragraph.properties;
     setElementStyle.setElementStyle(word, p, properties);
+    // 默认情况下 drawing 是相对段落的
+    p.style.position = 'relative';
     // 渲染列表前缀
     if (properties.numPr) {
         dom.appendChild(p, renderNumbering.renderNumbering(p, word, properties.numPr));
     }
-    if (properties.tabs) {
+    var inFldChar = false;
+    if (properties.tabs && properties.tabs.length) {
+        // 目前只支持渲染第一个，因为第二个位置取决于前面内容位置，挺麻烦
+        // 虽然目前这个实现很 hack，但可以支持常见情况
+        dom.appendChild(p, renderTab.renderTab(word, properties.tabs[0], true));
+        // 同时删掉第一个 run 中的 tab
+        var done = false;
         try {
-            for (var _c = tslib_es6.__values(properties.tabs), _d = _c.next(); !_d.done; _d = _c.next()) {
-                var tab = _d.value;
-                dom.appendChild(p, renderTab.renderTab(word, tab));
+            for (var _d = tslib.__values(paragraph.children), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var child = _e.value;
+                if (done) {
+                    break;
+                }
+                if (child instanceof Run.Run) {
+                    try {
+                        for (var _f = (e_2 = void 0, tslib.__values(child.children)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                            var runChild = _g.value;
+                            if (runChild instanceof Tab.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 = tslib_es6.__values(paragraph.children), _f = _e.next(); !_f.done; _f = _e.next()) {
-            var child = _f.value;
+        for (var _h = tslib.__values(paragraph.children), _j = _h.next(); !_j.done; _j = _h.next()) {
+            var child = _j.value;
             if (child instanceof Run.Run) {
-                dom.appendChild(p, renderRun["default"](word, child, paragraph));
+                if (child.fldChar === 'begin') {
+                    inFldChar = true;
+                }
+                else if (child) {
+                    inFldChar = false;
+                }
+                dom.appendChild(p, renderRun["default"](word, child, paragraph, inFldChar, inHeader));
             }
             else if (child instanceof Bookmark.BookmarkStart) {
                 dom.appendChild(p, renderBookmark.renderBookmarkStart(word, child));
@@ -60,17 +97,20 @@ function renderParagraph(word, paragraph, renderEmptySpace) {
                 var hyperlink = renderHyperLink.renderHyperLink(word, child, paragraph);
                 dom.appendChild(p, hyperlink);
             }
-            else if (child instanceof SmartTag.SmartTag) {
-                renderInlineText["default"](word, child, p);
+            else if (child instanceof OMath.OMath) {
+                dom.appendChild(p, renderMath.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/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
@@ -33,12 +39,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 = autoSpace.cjkspace(text.split(''));
+            finalText = autoSpace.cjkspace(text.split(''));
         }
         else {
-            span.textContent = text;
+            finalText = text;
         }
+        span.textContent = finalText;
     }
     else {
         span.dataset.originText = text;
@@ -46,6 +54,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;
 }
 /**
  * 更新文档里的所有变量
@@ -60,31 +71,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 +122,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 +139,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;