office-viewer 0.2.1 → 0.3.0

package/esm/word/render/renderHeader.js

@@ -0,0 +1,40 @@
+import { __values } from 'tslib';
+import { Paragraph } from '../../openxml/word/Paragraph.js';
+import renderParagraph from './renderParagraph.js';
+import { createElement, appendChild } from '../../util/dom.js';
+import renderTable from './renderTable.js';
+import { Table } from '../../openxml/word/Table.js';
+
+/**
+ * 渲染 header 内容
+ */
+function renderHeader(word, header) {
+    var e_1, _a;
+    var headerEl = createElement('div');
+    try {
+        for (var _b = __values(header.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            if (child instanceof Paragraph) {
+                var p = renderParagraph(word, child, true, true);
+                appendChild(headerEl, p);
+            }
+            else if (child instanceof Table) {
+                var table = renderTable(word, child);
+                appendChild(headerEl, table);
+            }
+            else {
+                console.warn('unknown child', child);
+            }
+        }
+    }
+    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 headerEl;
+}
+
+export { renderHeader };

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

@@ -0,0 +1,44 @@
+import { __values } from 'tslib';
+import { createElement, appendChild } from '../../util/dom.js';
+import { Run } from '../../openxml/word/Run.js';
+import renderRun from './renderRun.js';
+
+/**
+ * 渲染链接
+ */
+function renderHyperLink(word, hyperlink, paragraph) {
+    var e_1, _a;
+    var a = 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;
+    }
+    if (hyperlink.tooltip) {
+        a.title = hyperlink.tooltip;
+    }
+    try {
+        for (var _b = __values(hyperlink.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            if (child instanceof Run) {
+                var span = renderRun(word, child, paragraph);
+                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;
+}
+
+export { renderHyperLink };

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

@@ -0,0 +1,39 @@
+import { __values } from 'tslib';
+import { appendChild } from '../../util/dom.js';
+import { Run } from '../../openxml/word/Run.js';
+import { BookmarkStart } from '../../openxml/word/Bookmark.js';
+import { Hyperlink } from '../../openxml/word/Hyperlink.js';
+import renderRun from './renderRun.js';
+import { renderHyperLink } from './renderHyperLink.js';
+import { renderBookmarkStart } from './renderBookmark.js';
+
+/**
+ * 渲染 smart tag
+ */
+function renderInlineText(word, inlineText, parent) {
+    var e_1, _a;
+    try {
+        for (var _b = __values(inlineText.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            if (child instanceof Run) {
+                appendChild(parent, renderRun(word, child));
+            }
+            else if (child instanceof BookmarkStart) {
+                appendChild(parent, renderBookmarkStart(word, child));
+            }
+            else if (child instanceof Hyperlink) {
+                var hyperlink = renderHyperLink(word, child);
+                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; }
+    }
+}
+
+export { renderInlineText as default };

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

@@ -0,0 +1,40 @@
+import { __values } from 'tslib';
+import { createElement } from '../../util/dom.js';
+import renderInlineText from './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 = 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 = __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(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;
+}
+
+export { renderInstrText };

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

@@ -0,0 +1,3 @@
+import { OMath } from '../../openxml/math/OMath';
+import Word from '../../Word';
+export declare function renderOMath(word: Word, math: OMath): DocumentFragment;

package/esm/word/render/renderMath.js

@@ -0,0 +1,7 @@
+import { convertOOXML } from '../../openxml/math/convertOOML.js';
+
+function renderOMath(word, math) {
+    return convertOOXML(math.element);
+}
+
+export { renderOMath };

package/esm/word/render/renderNoBreakHyphen.js

@@ -0,0 +1,9 @@
+import { createElement } from '../../util/dom.js';
+
+function renderNoBreakHyphen() {
+    var softHyphen = createElement('span');
+    softHyphen.innerHTML = '–';
+    return softHyphen;
+}
+
+export { renderNoBreakHyphen };

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

@@ -0,0 +1,5 @@
+/**
+ * 渲染 footnotes 和 endnotes，这个需要最后执行
+ */
+import Word from '../../Word';
+export declare function renderNotes(word: Word): HTMLElement | null;

package/esm/word/render/renderNotes.js

@@ -0,0 +1,77 @@
+import { __values } from 'tslib';
+import { Paragraph } from '../../openxml/word/Paragraph.js';
+import { Table } from '../../openxml/word/Table.js';
+import { createElement, appendChild } from '../../util/dom.js';
+import renderParagraph from './renderParagraph.js';
+import renderTable from './renderTable.js';
+
+/**
+ * 渲染 footnotes 和 endnotes，这个需要最后执行
+ */
+function renderNote(word, noteRoot, type, id, note) {
+    var e_1, _a;
+    var noteChild = note.children;
+    var noteElement = createElement('div');
+    var mark = createElement('a');
+    var fName = type + '-' + id;
+    mark.name = fName;
+    mark.id = fName;
+    noteRoot.appendChild(noteElement);
+    try {
+        for (var noteChild_1 = __values(noteChild), noteChild_1_1 = noteChild_1.next(); !noteChild_1_1.done; noteChild_1_1 = noteChild_1.next()) {
+            var child = noteChild_1_1.value;
+            if (child instanceof Paragraph) {
+                var p = renderParagraph(word, child);
+                appendChild(noteElement, p);
+            }
+            else if (child instanceof Table) {
+                appendChild(noteElement, renderTable(word, child));
+            }
+            else {
+                console.warn('unknown child', child);
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (noteChild_1_1 && !noteChild_1_1.done && (_a = noteChild_1.return)) _a.call(noteChild_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
+/*
+ * 过滤掉 0 和 -1 后是否还有其他的值，没有的话就不需要渲染
+ */
+function hasNote(notes) {
+    if (!notes) {
+        return false;
+    }
+    for (var id in notes) {
+        if (id !== '0' && id !== '-1') {
+            return true;
+        }
+    }
+    return false;
+}
+function renderNotes(word) {
+    var noteRoot = createElement('div');
+    if (hasNote(word.footNotes)) {
+        for (var fId in word.footNotes) {
+            renderNote(word, noteRoot, 'footnote', fId, word.footNotes[fId]);
+        }
+    }
+    if (hasNote(word.endNotes)) {
+        for (var fId in word.endNotes || {}) {
+            renderNote(word, noteRoot, 'endnote', fId, word.endNotes[fId]);
+        }
+    }
+    if (noteRoot.children.length) {
+        return noteRoot;
+    }
+    else {
+        return null;
+    }
+}
+
+export { renderNotes };

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

@@ -0,0 +1,159 @@
+import { __assign } from 'tslib';
+import { createElement } from '../../util/dom.js';
+import { setElementStyle } from './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 'decimal':
+            return num.toString();
+        case 'lowerLetter':
+            return String.fromCharCode(96 + num);
+        case 'upperLetter':
+            return String.fromCharCode(64 + num);
+        case 'lowerRoman':
+            return romanize(num).toLowerCase();
+        case 'upperRoman':
+            return romanize(num).toUpperCase();
+        case '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 = __assign(__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 = 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(word, p, lvl.pPr);
+    setElementStyle(word, element, lvl.rPr);
+    // 还不支持 lvlJc
+    // 还不支持 image
+    // http://officeopenxml.com/WPnumbering-imagesAsSymbol.php
+    if (lvl.numFmt !== '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;
+}
+
+export { renderNumbering };

package/esm/word/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, inHeader?: boolean): HTMLElement;

package/esm/word/render/renderParagraph.js

@@ -0,0 +1,97 @@
+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';
+import { Hyperlink } from '../../openxml/word/Hyperlink.js';
+import renderRun from './renderRun.js';
+import { renderHyperLink } from './renderHyperLink.js';
+import { renderBookmarkStart } from './renderBookmark.js';
+import { renderNumbering } from './renderNumbering.js';
+import { setElementStyle } from './setElementStyle.js';
+import { renderTab } from './renderTab.js';
+import { OMath } from '../../openxml/math/OMath.js';
+import { renderOMath } from './renderMath.js';
+
+/**
+ * 渲染段落
+ * @param renderEmptySpace 如果是 true 的话，当内容为空时会自动加上  
+ */
+function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
+    var e_1, _a;
+    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));
+    }
+    var inFldChar = false;
+    if (properties.tabs && properties.tabs.length) {
+        // 目前只支持渲染第一个，因为第二个位置取决于前面内容位置，挺麻烦
+        // 虽然目前这个实现很 hack，但可以支持常见情况
+        appendChild(p, renderTab(word, properties.tabs[0], true));
+        // 同时删掉第一个 run 中的 tab
+        // let done = false;
+        // for (const child of paragraph.children) {
+        //   if (done) {
+        //     break;
+        //   }
+        //   if (child instanceof Run) {
+        //     for (const runChild of child.children) {
+        //       if (runChild instanceof Tab) {
+        //         child.children.splice(child.children.indexOf(runChild), 1);
+        //         done = true;
+        //         break;
+        //       }
+        //     }
+        //   }
+        // }
+    }
+    try {
+        for (var _b = __values(paragraph.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            if (child instanceof Run) {
+                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));
+            }
+            else if (child instanceof Hyperlink) {
+                var hyperlink = renderHyperLink(word, child, paragraph);
+                appendChild(p, hyperlink);
+            }
+            else if (child instanceof OMath) {
+                appendChild(p, renderOMath(word, child));
+            }
+            else {
+                console.warn('unknow pargraph type', child);
+            }
+        }
+    }
+    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; }
+    }
+    // 空行自动加个空格，不然会没高度
+    if (p.innerHTML === '' && renderEmptySpace) {
+        p.innerHTML = ' ';
+    }
+    return p;
+}
+
+export { renderParagraph as default };

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

@@ -0,0 +1,53 @@
+import { __values } from 'tslib';
+import { createElement } from '../../util/dom.js';
+import renderRun from './renderRun.js';
+
+/**
+ * 渲染 ruby 标签
+ */
+function renderRuby(word, ruby) {
+    var e_1, _a, e_2, _b;
+    var rubyElement = createElement('ruby');
+    if (ruby.rubyBase) {
+        try {
+            for (var _c = __values(ruby.rubyBase.children), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var text = _d.value;
+                rubyElement.appendChild(renderRun(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 = createElement('rp');
+            rpStart.innerText = '(';
+            rubyElement.appendChild(rpStart);
+            var rtElement = createElement('rt');
+            try {
+                for (var _e = __values(ruby.rt.children), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var text = _f.value;
+                    rtElement.appendChild(renderRun(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 = createElement('rp');
+            rpEnd.innerText = ')';
+            rubyElement.appendChild(rpEnd);
+        }
+    }
+    return rubyElement;
+}
+
+export { renderRuby };

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

@@ -0,0 +1,16 @@
+/**
+ * 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 节点
+ *
+ * @param inFldChar 是否在 complex field 里，预留功能，目前还不支持
+ */
+export default function renderRun(word: Word, run: Run, paragraph?: Paragraph, inFldChar?: boolean, inHeader?: boolean): HTMLElement;