office-viewer 0.1.0 → 0.1.4

package/esm/render/renderDrawing.js

@@ -1,38 +1,255 @@
+import { __values } from 'tslib';
+import { Paragraph } from '../openxml/word/Paragraph.js';
+import { appendChild, applyStyle } from '../util/dom.js';
+import renderParagraph from './renderParagraph.js';
+import renderTable from './renderTable.js';
+import { Table } from '../openxml/word/Table.js';
+import { renderGeom } from './renderGeom.js';
+import { renderCustGeom } from './renderCustGeom.js';
+
 /**
- * 渲染图片，目前只支持 picture
- * http://officeopenxml.com/drwOverview.php
- *
+ * 渲染图片
  */
-function renderDrawing(word, drawing) {
+function renderPic(pic, word, wpg) {
     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;
+    if (wpg === void 0) { wpg = null; }
+    var blip = (_a = pic.blipFill) === null || _a === void 0 ? void 0 : _a.blip;
+    if (blip && blip.src) {
+        var img = document.createElement('img');
+        img.style.position = 'relative';
+        img.alt = pic.alt || '';
+        img.src = blip.src;
+        if (pic.alt && word.renderOptions.enableVar) {
+            if (pic.altVar) {
+                img.src = pic.altVar;
+            }
+            else if (pic.alt.startsWith('{{')) {
+                var src = word.replaceText(pic.alt);
+                if (src) {
+                    img.src = src;
+                }
+            }
+        }
+        var xfrm = (_b = pic.spPr) === null || _b === void 0 ? void 0 : _b.xfrm;
+        if (xfrm) {
+            if (wpg) {
+                var rect = getRectInGroup(xfrm, (_c = wpg.spPr) === null || _c === void 0 ? void 0 : _c.xfrm);
+                if (rect) {
+                    img.style.position = 'absolute';
+                    img.style.left = rect.left + 'px';
+                    img.style.top = rect.top + 'px';
+                    img.style.width = rect.width + 'px';
+                    img.style.height = rect.height + 'px';
                 }
-            });
-            var xfrm = (_c = pic.spPr) === null || _c === void 0 ? void 0 : _c.xfrm;
-            if (xfrm) {
+            }
+            else {
                 var off = xfrm.off;
                 if (off) {
-                    img_1.style.left = off.x;
-                    img_1.style.top = off.y;
+                    img.style.left = off.x;
+                    img.style.top = off.y;
                 }
                 var ext = xfrm.ext;
                 if (ext) {
-                    img_1.style.width = ext.cx;
-                    img_1.style.height = ext.cy;
+                    img.style.width = ext.cx;
+                    img.style.height = ext.cy;
                 }
             }
-            return img_1;
+            if (xfrm.rot) {
+                img.style.transform = "rotate(".concat(xfrm.rot, "deg)");
+            }
         }
+        return img;
+    }
+    return null;
+}
+/**
+ * 获取在 group 中的位置
+ * @param xfrm 元素的位置定义
+ *  @param groupXfrm 分组中的位置定义
+ */
+function getRectInGroup(xfrm, groupXfrm) {
+    var off = xfrm.off;
+    var width = parseFloat(xfrm.ext.cx.replace('px', ''));
+    var height = parseFloat(xfrm.ext.cy.replace('px', ''));
+    if (off && groupXfrm.chOff && groupXfrm.ext && groupXfrm.chExt) {
+        // 先算缩放比
+        var scaleX = parseFloat(groupXfrm.ext.cx.replace('px', '')) /
+            parseFloat(groupXfrm.chExt.cx.replace('px', ''));
+        var scaleY = parseFloat(groupXfrm.ext.cy.replace('px', '')) /
+            parseFloat(groupXfrm.chExt.cy.replace('px', ''));
+        var groupOffX = parseFloat(groupXfrm.chOff.x.replace('px', ''));
+        var groupOffY = parseFloat(groupXfrm.chOff.y.replace('px', ''));
+        var x = parseFloat(off.x.replace('px', ''));
+        var y = parseFloat(off.y.replace('px', ''));
+        return {
+            left: scaleX * (x - groupOffX),
+            top: scaleY * (y - groupOffY),
+            width: scaleX * width,
+            height: scaleY * height
+        };
     }
     return null;
 }
+/**
+ * 渲染文本框
+ */
+function renderWps(word, container, wps, wpg) {
+    var e_1, _a;
+    var _b;
+    if (wpg === void 0) { wpg = null; }
+    var wpsStyle = wps.wpsStyle;
+    var spPr = wps.spPr;
+    applyStyle(container, wps.style);
+    if (wpsStyle === null || wpsStyle === void 0 ? void 0 : wpsStyle.fontColor) {
+        container.style.color = wpsStyle.fontColor;
+    }
+    if (spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) {
+        var ext = spPr.xfrm.ext;
+        if (ext) {
+            var width = parseFloat(ext.cx.replace('px', ''));
+            var height = parseFloat(ext.cy.replace('px', ''));
+            // 在分组中的计算方式不一样，另外在分组中还需要绝对定位
+            // 这个计算方法在官方文档里没找到
+            if (wpg) {
+                container.style.position = 'absolute';
+                var rect = getRectInGroup(spPr.xfrm, (_b = wpg.spPr) === null || _b === void 0 ? void 0 : _b.xfrm);
+                if (rect) {
+                    container.style.left = rect.left + 'px';
+                    container.style.top = rect.top + 'px';
+                    width = rect.width;
+                    height = rect.height;
+                }
+            }
+            container.style.width = width + 'px';
+            container.style.height = height + 'px';
+            if (spPr.geom) {
+                appendChild(container, renderGeom(spPr.geom, spPr, width, height, wps.wpsStyle));
+            }
+            if (spPr.custGeom) {
+                appendChild(container, renderCustGeom(spPr.custGeom, spPr, width, height, wps.wpsStyle));
+            }
+        }
+        if (spPr.xfrm.rot) {
+            container.style.transform = "rotate(".concat(spPr.xfrm.rot, "deg)");
+        }
+    }
+    var txbxContent = wps.txbxContent;
+    if (txbxContent.length) {
+        // 为了实现垂直居中，将父容器改成 table 布局
+        var textContainer = document.createElement('div');
+        textContainer.dataset.name = 'textContainer';
+        container.style.display = 'table';
+        textContainer.style.display = 'table-cell';
+        textContainer.style.verticalAlign = 'middle';
+        if (wps.style && wps.style['vertical-align']) {
+            textContainer.style.verticalAlign = wps.style['vertical-align'];
+            // 容器的 vertical-align 需要去掉，虽然也不影响
+            container.style.verticalAlign = '';
+        }
+        appendChild(container, textContainer);
+        try {
+            for (var txbxContent_1 = __values(txbxContent), txbxContent_1_1 = txbxContent_1.next(); !txbxContent_1_1.done; txbxContent_1_1 = txbxContent_1.next()) {
+                var txbxContentChild = txbxContent_1_1.value;
+                if (txbxContentChild instanceof Paragraph) {
+                    appendChild(textContainer, renderParagraph(word, txbxContentChild));
+                }
+                else if (txbxContentChild instanceof Table) {
+                    appendChild(textContainer, renderTable(word, txbxContentChild));
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (txbxContent_1_1 && !txbxContent_1_1.done && (_a = txbxContent_1.return)) _a.call(txbxContent_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+}
+function renderWpg(word, wpg) {
+    var e_2, _a, e_3, _b;
+    var _c, _d;
+    var container = document.createElement('div');
+    var wpgContainer = document.createElement('div');
+    var spPr = wpg.spPr;
+    if (spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) {
+        var ext = (_c = spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) === null || _c === void 0 ? void 0 : _c.ext;
+        if (ext) {
+            wpgContainer.style.width = ext.cx;
+            wpgContainer.style.height = ext.cy;
+        }
+        var rot = (_d = spPr === null || spPr === void 0 ? void 0 : spPr.xfrm) === null || _d === void 0 ? void 0 : _d.rot;
+        if (rot) {
+            wpgContainer.style.transform = "rotate(".concat(rot, "deg)");
+        }
+    }
+    try {
+        for (var _e = __values(wpg.wps), _f = _e.next(); !_f.done; _f = _e.next()) {
+            var wps = _f.value;
+            var wpsContainer = document.createElement('div');
+            renderWps(word, wpsContainer, wps, wpg);
+            appendChild(wpgContainer, wpsContainer);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    try {
+        for (var _g = __values(wpg.wpg), _h = _g.next(); !_h.done; _h = _g.next()) {
+            var childWpg = _h.value;
+            appendChild(container, renderWpg(word, childWpg));
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    if (wpg.pic) {
+        appendChild(wpgContainer, renderPic(wpg.pic, word, wpg));
+    }
+    appendChild(container, wpgContainer);
+    return container;
+}
+/**
+ * 渲染图片，目前只支持 picture
+ * http://officeopenxml.com/drwOverview.php
+ * @param inHeader，如果在 header 中，位置计算要特殊处理
+ *
+ */
+function renderDrawing(word, drawing, inHeader) {
+    var container = document.createElement('div');
+    if (drawing.position === 'inline') {
+        container.style.display = 'inline-block';
+    }
+    else if (drawing.position === 'anchor') ;
+    if (drawing.pic) {
+        appendChild(container, renderPic(drawing.pic, word));
+    }
+    if (drawing.relativeFromV === 'page') {
+        console.warn('暂不支持 drawing.relativeFromV === "page"');
+    }
+    applyStyle(container, drawing.containerStyle);
+    container.dataset.id = drawing.id || '';
+    container.dataset.name = drawing.name || '';
+    if (drawing.wps) {
+        renderWps(word, container, drawing.wps);
+    }
+    if (drawing.wpg) {
+        appendChild(container, renderWpg(word, drawing.wpg));
+    }
+    // 如果没内容就不渲染了，避免高度导致撑开父节点
+    if (container.children.length === 0) {
+        return null;
+    }
+    return container;
+}
 
 export { renderDrawing };

package/esm/render/renderFont.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 渲染自定义字体样式
+ */
+import { FontTable } from '../openxml/word/FontTable';
+export declare function renderFont(fontTable?: FontTable): HTMLElement | null;

package/esm/render/renderFont.js

@@ -0,0 +1,39 @@
+import { __values } from 'tslib';
+import { createElement } from '../util/dom.js';
+
+/**
+ * 渲染自定义字体样式
+ */
+function renderFont(fontTable) {
+    var e_1, _a;
+    if (!fontTable) {
+        return null;
+    }
+    var fonts = fontTable.fonts;
+    if (!fonts || !fonts.length) {
+        return null;
+    }
+    var style = createElement('style');
+    var fontContent = '/** embedded fonts **/';
+    try {
+        for (var _b = __values(fontTable.fonts), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var font = _c.value;
+            var fontName = font.name.replace(/['\\]/g, ''); // 简单防止 xss
+            var fontPath = font.url;
+            if (fontName && fontPath) {
+                fontContent += "\n      @font-face {\n        font-family: '".concat(fontName, "';\n        src: url('").concat(fontPath, "');\n      }\n      ");
+            }
+        }
+    }
+    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; }
+    }
+    style.innerHTML = fontContent;
+    return style;
+}
+
+export { renderFont };

package/esm/render/renderGeom.d.ts

@@ -0,0 +1,4 @@
+import { Geom } from '../openxml/drawing/Geom';
+import { ShapePr } from '../openxml/drawing/ShapeProperties';
+import { WPSStyle } from '../openxml/word/wps/WPSStyle';
+export declare function renderGeom(geom: Geom, shapePr: ShapePr, width: number, height: number, wpsStyle?: WPSStyle): SVGElement | null;

package/esm/render/renderGeom.js

@@ -0,0 +1,14 @@
+import { presetShape } from '../openxml/drawing/presetShape.js';
+import { shapeToSVG } from '../openxml/drawing/svg/shapeToSVG.js';
+
+function renderGeom(geom, shapePr, width, height, wpsStyle) {
+    if (geom.prst) {
+        var shape = presetShape[geom.prst];
+        if (shape) {
+            return shapeToSVG(shape, geom.avLst || [], shapePr, width, height, wpsStyle);
+        }
+    }
+    return null;
+}
+
+export { renderGeom };

package/esm/render/renderHeader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 渲染 header 内容
+ */
+import Word from '../Word';
+import { Header } from '../openxml/word/Header';
+export declare function renderHeader(word: Word, header: Header): HTMLElement;

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

@@ -1,4 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 import { createElement, appendChild } from '../util/dom.js';
 import { Run } from '../openxml/word/Run.js';
 import renderRun from './renderRun.js';
@@ -19,6 +19,9 @@ function renderHyperLink(word, hyperlink, paragraph) {
     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;

package/esm/render/renderInlineText.js

@@ -1,4 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 import { appendChild } from '../util/dom.js';
 import { Run } from '../openxml/word/Run.js';
 import { BookmarkStart } from '../openxml/word/Bookmark.js';

package/esm/render/renderInstrText.js

@@ -1,4 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 import { createElement } from '../util/dom.js';
 import renderInlineText from './renderInlineText.js';
 

package/esm/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/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/render/renderNoBreakHyphen.d.ts

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

package/esm/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/render/renderNotes.d.ts

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

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

@@ -1,6 +1,5 @@
-import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { __assign } from 'tslib';
 import { createElement } from '../util/dom.js';
-import { ST_NumberFormat } from '../openxml/Types.js';
 import { setElementStyle } from './setElementStyle.js';
 
 /**
@@ -36,17 +35,17 @@ function romanize(num) {
  */
 function convertNumToFormat(numFmt, num) {
     switch (numFmt) {
-        case ST_NumberFormat.decimal:
+        case 'decimal':
             return num.toString();
-        case ST_NumberFormat.lowerLetter:
+        case 'lowerLetter':
             return String.fromCharCode(96 + num);
-        case ST_NumberFormat.upperLetter:
+        case 'upperLetter':
             return String.fromCharCode(64 + num);
-        case ST_NumberFormat.lowerRoman:
+        case 'lowerRoman':
             return romanize(num).toLowerCase();
-        case ST_NumberFormat.upperRoman:
+        case 'upperRoman':
             return romanize(num).toUpperCase();
-        case ST_NumberFormat.bullet:
+        case 'bullet':
             // 原本其实是用
             return '•';
         default:
@@ -129,8 +128,7 @@ function renderNumbering(p, word, numPr) {
     // 还不支持 lvlJc
     // 还不支持 image
     // http://officeopenxml.com/WPnumbering-imagesAsSymbol.php
-    if (lvl.numFmt !== ST_NumberFormat.bullet ||
-        word.renderOptions.bulletUseFont) {
+    if (lvl.numFmt !== 'bullet' || word.renderOptions.bulletUseFont) {
         element.innerText = lvlText;
     }
     else {

package/esm/render/renderParagraph.d.ts

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