office-viewer 0.1.0

package/lib/render/renderBr.d.ts

@@ -0,0 +1,7 @@
+import { Break } from '../openxml/word/Break';
+/**
+ * 解析 br http://officeopenxml.com/WPtextSpecialContent-break.php
+ * 其实还有 column 和 page，但目前还没实现分页渲染，所以目前先简单处理，后续再看看如何处理
+ * @returns 生成的 dom 结构
+ */
+export declare function renderBr(brak: Break): HTMLElement;

package/lib/render/renderBr.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('../util/dom.js');
+
+/**
+ * 解析 br http://officeopenxml.com/WPtextSpecialContent-break.php
+ * 其实还有 column 和 page，但目前还没实现分页渲染，所以目前先简单处理，后续再看看如何处理
+ * @returns 生成的 dom 结构
+ */
+function renderBr(brak) {
+    var br = dom.createElement('br');
+    return br;
+}
+
+exports.renderBr = renderBr;

package/lib/render/renderDocument.d.ts

@@ -0,0 +1,7 @@
+import Word from '../Word';
+import { WDocument } from '../openxml/word/WDocument';
+/**
+ * 渲染 document 主要入口
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/document.html
+ */
+export default function renderDocument(word: Word, document: WDocument): HTMLElement;

package/lib/render/renderDocument.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('../util/dom.js');
+var renderBody = require('./renderBody.js');
+
+/**
+ * 渲染 document 主要入口
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/document.html
+ */
+function renderDocument(word, document) {
+    var doc = dom.createElement('article');
+    renderBody["default"](word, doc, document.body);
+    return doc;
+}
+
+exports["default"] = renderDocument;

package/lib/render/renderDrawing.d.ts

@@ -0,0 +1,8 @@
+import Word from '../Word';
+import { Drawing } from '../openxml/word/drawing/Drawing';
+/**
+ * 渲染图片，目前只支持 picture
+ * http://officeopenxml.com/drwOverview.php
+ *
+ */
+export declare function renderDrawing(word: Word, drawing: Drawing): HTMLElement | null;

package/lib/render/renderDrawing.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 渲染图片，目前只支持 picture
+ * http://officeopenxml.com/drwOverview.php
+ *
+ */
+function renderDrawing(word, drawing) {
+    var _a, _b, _c;
+    var pic = drawing.pic;
+    if (pic) {
+        var blip = (_a = pic.blipFill) === null || _a === void 0 ? void 0 : _a.blip;
+        if (blip && blip.embled) {
+            var img_1 = document.createElement('img');
+            img_1.style.position = 'relative';
+            (_b = word.loadImage(blip.embled)) === null || _b === void 0 ? void 0 : _b.then(function (url) {
+                if (url) {
+                    img_1.src = url;
+                }
+            });
+            var xfrm = (_c = pic.spPr) === null || _c === void 0 ? void 0 : _c.xfrm;
+            if (xfrm) {
+                var off = xfrm.off;
+                if (off) {
+                    img_1.style.left = off.x;
+                    img_1.style.top = off.y;
+                }
+                var ext = xfrm.ext;
+                if (ext) {
+                    img_1.style.width = ext.cx;
+                    img_1.style.height = ext.cy;
+                }
+            }
+            return img_1;
+        }
+    }
+    return null;
+}
+
+exports.renderDrawing = renderDrawing;

package/lib/render/renderHyperLink.d.ts

@@ -0,0 +1,7 @@
+import { Hyperlink } from './../openxml/word/Hyperlink';
+import Word from '../Word';
+import type { Paragraph } from '../openxml/word/Paragraph';
+/**
+ * 渲染链接
+ */
+export declare function renderHyperLink(word: Word, hyperlink: Hyperlink, paragraph?: Paragraph): HTMLElement;

package/lib/render/renderHyperLink.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var dom = require('../util/dom.js');
+var Run = require('../openxml/word/Run.js');
+var renderRun = require('./renderRun.js');
+
+/**
+ * 渲染链接
+ */
+function renderHyperLink(word, hyperlink, paragraph) {
+    var e_1, _a;
+    var a = dom.createElement('a');
+    if (hyperlink.relation) {
+        var rel = hyperlink.relation;
+        if (rel && rel.targetMode === 'External') {
+            a.href = rel.target;
+            a.target = '_blank';
+        }
+    }
+    if (hyperlink.anchor) {
+        a.href = '#' + hyperlink.anchor;
+    }
+    try {
+        for (var _b = tslib_es6.__values(hyperlink.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            if (child instanceof Run.Run) {
+                var span = renderRun["default"](word, child, paragraph);
+                dom.appendChild(a, span);
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return a;
+}
+
+exports.renderHyperLink = renderHyperLink;

package/lib/render/renderInlineText.d.ts

@@ -0,0 +1,6 @@
+import Word from '../Word';
+import { InlineText } from '../openxml/word/InlineText';
+/**
+ * 渲染 smart tag
+ */
+export default function renderInlineText(word: Word, inlineText: InlineText, parent: HTMLElement): void;

package/lib/render/renderInlineText.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var dom = require('../util/dom.js');
+var Run = require('../openxml/word/Run.js');
+var Bookmark = require('../openxml/word/Bookmark.js');
+var Hyperlink = require('../openxml/word/Hyperlink.js');
+var renderRun = require('./renderRun.js');
+var renderHyperLink = require('./renderHyperLink.js');
+var renderBookmark = require('./renderBookmark.js');
+
+/**
+ * 渲染 smart tag
+ */
+function renderInlineText(word, inlineText, parent) {
+    var e_1, _a;
+    try {
+        for (var _b = tslib_es6.__values(inlineText.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            if (child instanceof Run.Run) {
+                dom.appendChild(parent, renderRun["default"](word, child));
+            }
+            else if (child instanceof Bookmark.BookmarkStart) {
+                dom.appendChild(parent, renderBookmark.renderBookmarkStart(word, child));
+            }
+            else if (child instanceof Hyperlink.Hyperlink) {
+                var hyperlink = renderHyperLink.renderHyperLink(word, child);
+                dom.appendChild(parent, hyperlink);
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
+
+exports["default"] = renderInlineText;

package/lib/render/renderInstrText.d.ts

@@ -0,0 +1,8 @@
+import { InstrText } from '../openxml/word/InstrText';
+import Word from '../Word';
+/**
+ * 渲染字段指令，目前基本都没实现
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/Field%20definitions.html
+ * http://officeopenxml.com/WPfieldInstructions.php
+ */
+export declare function renderInstrText(word: Word, instrText: InstrText): HTMLElement;

package/lib/render/renderInstrText.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var dom = require('../util/dom.js');
+var renderInlineText = require('./renderInlineText.js');
+
+/**
+ * 渲染字段指令，目前基本都没实现
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/Field%20definitions.html
+ * http://officeopenxml.com/WPfieldInstructions.php
+ */
+function renderInstrText(word, instrText) {
+    var e_1, _a;
+    var _b;
+    var text = instrText.text;
+    var span = dom.createElement('span');
+    var fldSimples = (_b = word.currentParagraph) === null || _b === void 0 ? void 0 : _b.fldSimples;
+    if (fldSimples) {
+        try {
+            // 其实不知道这样做是不是对的
+            // 另外就是这里有很多指令还不支持 http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/FILENAME.html
+            for (var fldSimples_1 = tslib_es6.__values(fldSimples), fldSimples_1_1 = fldSimples_1.next(); !fldSimples_1_1.done; fldSimples_1_1 = fldSimples_1.next()) {
+                var fldSimple = fldSimples_1_1.value;
+                if (fldSimple.instr === text.trim() ||
+                    text.startsWith(fldSimple.instr + ' ')) {
+                    renderInlineText["default"](word, fldSimple.inlineText, span);
+                    break;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (fldSimples_1_1 && !fldSimples_1_1.done && (_a = fldSimples_1.return)) _a.call(fldSimples_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+    return span;
+}
+
+exports.renderInstrText = renderInstrText;

package/lib/render/renderNumbering.d.ts

@@ -0,0 +1,7 @@
+import { NumberPr } from '../openxml/word/numbering/NumberProperties';
+import Word from '../Word';
+/**
+ * 渲染列表 http://officeopenxml.com/WPnumbering.php
+ * 为了支持复杂场景，这里使用代码来直接生成内容
+ */
+export declare function renderNumbering(p: HTMLElement, word: Word, numPr: NumberPr): HTMLElement | null;

package/lib/render/renderNumbering.js

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var dom = require('../util/dom.js');
+var Types = require('../openxml/Types.js');
+var setElementStyle = require('./setElementStyle.js');
+
+/**
+ * 整数转成罗马数字，来自 https://stackoverflow.com/a/32851198
+ */
+function romanize(num) {
+    var lookup = {
+        M: 1000,
+        CM: 900,
+        D: 500,
+        CD: 400,
+        C: 100,
+        XC: 90,
+        L: 50,
+        XL: 40,
+        X: 10,
+        IX: 9,
+        V: 5,
+        IV: 4,
+        I: 1
+    };
+    var roman = '';
+    for (var key in lookup) {
+        while (num >= lookup[key]) {
+            roman += key;
+            num -= lookup[key];
+        }
+    }
+    return roman;
+}
+/**
+ * 将数字转成列表格式，目前只支持少数几种格式，不支持的都直接返回数字
+ */
+function convertNumToFormat(numFmt, num) {
+    switch (numFmt) {
+        case Types.ST_NumberFormat.decimal:
+            return num.toString();
+        case Types.ST_NumberFormat.lowerLetter:
+            return String.fromCharCode(96 + num);
+        case Types.ST_NumberFormat.upperLetter:
+            return String.fromCharCode(64 + num);
+        case Types.ST_NumberFormat.lowerRoman:
+            return romanize(num).toLowerCase();
+        case Types.ST_NumberFormat.upperRoman:
+            return romanize(num).toUpperCase();
+        case Types.ST_NumberFormat.bullet:
+            // 原本其实是用
+            return '•';
+        default:
+            return num.toString();
+    }
+}
+/**
+ * 渲染列表 http://officeopenxml.com/WPnumbering.php
+ * 为了支持复杂场景，这里使用代码来直接生成内容
+ */
+function renderNumbering(p, word, numPr) {
+    var numbering = word.numbering;
+    var numId = numPr.numId;
+    if (!numId) {
+        console.warn('renderNumbering: numId is empty');
+        return null;
+    }
+    if (!numbering) {
+        console.warn('renderNumbering: numbering is empty');
+        return null;
+    }
+    var num = numbering.nums[numId];
+    if (!num) {
+        console.warn('renderNumbering: num is empty');
+        return null;
+    }
+    var abstractNum = numbering.abstractNums[num.abstractNumId];
+    var lvls = abstractNum.lvls;
+    if (num.lvlOverride) {
+        lvls = tslib_es6.__assign(tslib_es6.__assign({}, lvls), num.lvlOverride.lvls);
+    }
+    var lvl = lvls[numPr.ilvl];
+    if (!lvl) {
+        console.warn('renderNumbering: lvl is empty');
+        return null;
+    }
+    var ilvl = numPr.ilvl;
+    var ilvlData = numbering.numData[numId];
+    // 还不支持 http://officeopenxml.com/WPnumbering-restart.php
+    if (!ilvlData[ilvl]) {
+        ilvlData[ilvl] = lvl.start;
+    }
+    else {
+        ilvlData[ilvl] += 1;
+        // 加一之后，将比它大的都清空，这样才能每个级别重置
+        for (var ilvIndex in ilvlData) {
+            if (parseInt(ilvIndex) > parseInt(ilvl)) {
+                ilvlData[ilvIndex] = 0;
+            }
+        }
+    }
+    var element = dom.createElement('span');
+    var lvlText = lvl.lvlText;
+    // 格式化内容
+    var level = parseInt(ilvl);
+    // 获取每个层级的值
+    var levelNums = [];
+    for (var i = 0; i <= level; i++) {
+        var listNumber = ilvlData[i];
+        if (listNumber) {
+            var numFmt = lvls[i].numFmt;
+            var numText = convertNumToFormat(numFmt, listNumber);
+            // 强制数字显示 http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/isLgl.html
+            // http://officeopenxml.com/WPnumbering-isLgl.php
+            if (lvl.isLgl) {
+                numText = String(listNumber);
+            }
+            levelNums.push(numText);
+        }
+    }
+    for (var i = 0; i < levelNums.length; i++) {
+        var levelNum = levelNums[i];
+        lvlText = lvlText.replace("%".concat(i + 1), levelNum);
+    }
+    // 这个 pPr 似乎是影响父级的
+    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/pPr_6.html
+    // This element specifies the paragraph properties which shall be applied as part of a given numbering level within the parent numbering definition.
+    setElementStyle.setElementStyle(word, p, lvl.pPr);
+    setElementStyle.setElementStyle(word, element, lvl.rPr);
+    // 还不支持 lvlJc
+    // 还不支持 image
+    // http://officeopenxml.com/WPnumbering-imagesAsSymbol.php
+    if (lvl.numFmt !== Types.ST_NumberFormat.bullet ||
+        word.renderOptions.bulletUseFont) {
+        element.innerText = lvlText;
+    }
+    else {
+        // 如果没有字体只能尽可能模拟了
+        // 参考 https://www.w3schools.com/charsets/ref_utf_geometric.asp
+        var bulletText = '&bull;';
+        var unicodeString = lvlText.charCodeAt(0).toString(16).padStart(4, '0');
+        if (unicodeString === 'f06e') {
+            bulletText = '&#9632;';
+        }
+        else if (unicodeString === 'f075') {
+            bulletText = '&#9670;';
+        }
+        else if (unicodeString === 'f0d8') {
+            bulletText = '&#9658;';
+        }
+        element.innerHTML = bulletText;
+    }
+    if (lvl.suff === 'space') {
+        element.innerHTML += ' ';
+    }
+    else if (lvl.suff === 'tab') {
+        element.innerHTML += '&emsp;';
+    }
+    return element;
+}
+
+exports.renderNumbering = renderNumbering;

package/lib/render/renderParagraph.d.ts

@@ -0,0 +1,7 @@
+import Word from '../Word';
+import { Paragraph } from '../openxml/word/Paragraph';
+/**
+ * 渲染段落
+ * @param renderEmptySpace 如果是 true 的话，当内容为空时会自动加上  
+ */
+export default function renderParagraph(word: Word, paragraph: Paragraph, renderEmptySpace?: boolean): HTMLElement;

package/lib/render/renderParagraph.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var dom = require('../util/dom.js');
+var Run = require('../openxml/word/Run.js');
+var Bookmark = require('../openxml/word/Bookmark.js');
+var Hyperlink = require('../openxml/word/Hyperlink.js');
+var renderRun = require('./renderRun.js');
+var renderHyperLink = require('./renderHyperLink.js');
+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');
+
+/**
+ * 渲染段落
+ * @param renderEmptySpace 如果是 true 的话，当内容为空时会自动加上  
+ */
+function renderParagraph(word, paragraph, renderEmptySpace) {
+    var e_1, _a, e_2, _b;
+    if (renderEmptySpace === void 0) { renderEmptySpace = true; }
+    word.currentParagraph = paragraph;
+    var p = dom.createElement('p');
+    word.addClass(p, 'p');
+    var properties = paragraph.properties;
+    setElementStyle.setElementStyle(word, p, properties);
+    // 渲染列表前缀
+    if (properties.numPr) {
+        dom.appendChild(p, renderNumbering.renderNumbering(p, word, properties.numPr));
+    }
+    if (properties.tabs) {
+        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));
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            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;
+            if (child instanceof Run.Run) {
+                dom.appendChild(p, renderRun["default"](word, child, paragraph));
+            }
+            else if (child instanceof Bookmark.BookmarkStart) {
+                dom.appendChild(p, renderBookmark.renderBookmarkStart(word, child));
+            }
+            else if (child instanceof Hyperlink.Hyperlink) {
+                var hyperlink = renderHyperLink.renderHyperLink(word, child, paragraph);
+                dom.appendChild(p, hyperlink);
+            }
+            else if (child instanceof SmartTag.SmartTag) {
+                renderInlineText["default"](word, child, p);
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    // 空行自动加个空格，不然会没高度
+    if (p.innerHTML === '' && renderEmptySpace) {
+        p.innerHTML = ' ';
+    }
+    return p;
+}
+
+exports["default"] = renderParagraph;

package/lib/render/renderPict.d.ts

@@ -0,0 +1,6 @@
+import { Pict } from '../openxml/word/Pict';
+import Word from '../Word';
+/**
+ * 老的 vml 格式，目前只支持图片
+ */
+export declare function renderPict(word: Word, pict: Pict): HTMLImageElement | null;

package/lib/render/renderPict.js

@@ -0,0 +1,23 @@
+'use strict';
+
+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;
+    }
+    return null;
+}
+
+exports.renderPict = renderPict;

package/lib/render/renderRuby.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 渲染 ruby 标签
+ */
+import { Ruby } from '../openxml/word/Ruby';
+import Word from '../Word';
+export declare function renderRuby(word: Word, ruby: Ruby): HTMLElement;

package/lib/render/renderRuby.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var dom = require('../util/dom.js');
+var renderRun = require('./renderRun.js');
+
+/**
+ * 渲染 ruby 标签
+ */
+function renderRuby(word, ruby) {
+    var e_1, _a, e_2, _b;
+    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()) {
+                var text = _d.value;
+                rubyElement.appendChild(renderRun["default"](word, text));
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        if (ruby.rt) {
+            // rp 是给不支持 ruby 的浏览器显示的
+            var rpStart = dom.createElement('rp');
+            rpStart.innerText = '(';
+            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()) {
+                    var text = _f.value;
+                    rtElement.appendChild(renderRun["default"](word, text));
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            rubyElement.appendChild(rtElement);
+            var rpEnd = dom.createElement('rp');
+            rpEnd.innerText = ')';
+            rubyElement.appendChild(rpEnd);
+        }
+    }
+    return rubyElement;
+}
+
+exports.renderRuby = renderRuby;

package/lib/render/renderRun.d.ts

@@ -0,0 +1,14 @@
+/**
+ * run 相关的 http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/Run_1.html
+ */
+import Word from '../Word';
+import { Run } from '../openxml/word/Run';
+import type { Paragraph } from './../openxml/word/Paragraph';
+/**
+ * 更新文档里的所有变量
+ */
+export declare function updateVariableText(word: Word): void;
+/**
+ * 渲染 run 节点
+ */
+export default function renderRun(word: Word, run: Run, paragraph?: Paragraph): HTMLElement;