office-viewer 0.1.0 → 0.1.4

package/esm/parse/parseTcPr.js

@@ -0,0 +1,99 @@
+import { __values } from 'tslib';
+import { parseCellMargin } from './parseCellMargin.js';
+import { parseShdColor } from './parseColor.js';
+import { getValBoolean, getVal, getValNumber } from '../OpenXML.js';
+import { parseBorders } from './parseBorder.js';
+import { parseTextDirection } from './parseTextDirection.js';
+import { parseTblWidth } from './parseTblWidth.js';
+import { parseInsideBorders } from './parseInsideBorders.js';
+
+function parseVAlign(element, style) {
+    var vAlign = getVal(element);
+    switch (vAlign) {
+        case 'bottom':
+            style['vertical-align'] = 'bottom';
+            break;
+        case 'center':
+            style['vertical-align'] = 'middle';
+            break;
+        case 'top':
+            style['vertical-align'] = 'top';
+            break;
+    }
+}
+function parseTblCellSpacing(element, style) {
+    var width = parseTblWidth(element);
+    if (width) {
+        style['cell-spacing'] = width;
+    }
+}
+function parseTcW(element, style) {
+    var width = parseTblWidth(element);
+    if (width) {
+        style.width = width;
+    }
+}
+function parseTcPr(word, element) {
+    var e_1, _a;
+    var properties = {};
+    var style = {};
+    properties.cssStyle = style;
+    try {
+        for (var _b = __values(element.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            var tagName = child.tagName;
+            switch (tagName) {
+                case 'w:tcMar':
+                    parseCellMargin(child, style);
+                    break;
+                case 'w:shd':
+                    style['background-color'] = parseShdColor(word, child);
+                    break;
+                case 'w:tcW':
+                    parseTcW(child, style);
+                    break;
+                case 'w:noWrap':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/noWrap.html
+                    var noWrap = getValBoolean(child);
+                    if (noWrap) {
+                        style['white-space'] = 'nowrap';
+                    }
+                    break;
+                case 'w:vAlign':
+                    parseVAlign(child, style);
+                    break;
+                case 'w:tcBorders':
+                    parseBorders(word, child, style);
+                    properties.insideBorder = parseInsideBorders(word, child);
+                    break;
+                case 'w:gridSpan':
+                    properties.gridSpan = getValNumber(child);
+                    break;
+                case 'w:vMerge':
+                    properties.vMerge = getVal(child) || 'continue';
+                    break;
+                case 'w:textDirection':
+                    parseTextDirection(child, style);
+                    break;
+                case 'w:cnfStyle':
+                    // 目前是自动计算的，所以不需要这个了
+                    break;
+                case 'w:hideMark':
+                    properties.hideMark = getValBoolean(child, true);
+                    break;
+                default:
+                    console.warn('parseTcPr: ignore', tagName, 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 properties;
+}
+
+export { parseTblCellSpacing, parseTcPr };

package/esm/parse/parseTextDirection.js

@@ -1,20 +1,18 @@
-import { ST_TextDirection } from '../openxml/Types.js';
-
 function parseTextDirection(element, style) {
     var val = element.getAttribute('w:val');
     // 目前值支持 ltr 或 rtl
     // 奇怪这里的类型定义不完整，可能是脚本的问题
     switch (val) {
-        case ST_TextDirection.lr:
-        case ST_TextDirection.lrV:
+        case 'lr':
+        case 'lrV':
         case 'btLr':
         case 'lrTb':
         case 'lrTbV':
         case 'tbLrV':
             style['direction'] = 'ltr';
             break;
-        case ST_TextDirection.rl:
-        case ST_TextDirection.rlV:
+        case 'rl':
+        case 'rlV':
         case 'tbRl':
         case 'tbRlV':
             style['direction'] = 'rtl';

package/esm/parse/parseTr.d.ts

@@ -0,0 +1,6 @@
+import Word from '../Word';
+import { Tr } from '../openxml/word/table/Tr';
+import { Tc } from '../openxml/word/table/Tc';
+export declare function parseTr(word: Word, element: Element, rowSpanMap: {
+    [key: string]: Tc;
+}): Tr;

package/esm/parse/parseTr.js

@@ -0,0 +1,49 @@
+import { __values } from 'tslib';
+import { Tr } from '../openxml/word/table/Tr.js';
+import { parseTc } from './parseTc.js';
+import { parseTablePr } from './parseTablePr.js';
+import { parseTrPr } from './parseTrPr.js';
+import { mergeSdt } from './mergeSdt.js';
+
+function parseTr(word, element, rowSpanMap) {
+    var e_1, _a;
+    var tr = new Tr();
+    // 做成对象是为了传递引用来修改
+    var currentCol = {
+        index: 0
+    };
+    try {
+        for (var _b = __values(mergeSdt(element)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            var tagName = child.tagName;
+            switch (tagName) {
+                case 'w:tc':
+                    var tc = parseTc(word, child, currentCol, rowSpanMap);
+                    if (tc) {
+                        tr.tcs.push(tc);
+                    }
+                    break;
+                case 'w:trPr':
+                    tr.properties = parseTrPr(word, child);
+                    break;
+                case 'w:tblPrEx':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/tblPrEx_1.html
+                    var tablePr = parseTablePr(word, child);
+                    Object.assign(tr.properties.cssStyle || {}, tablePr.cssStyle);
+                    break;
+                default:
+                    console.warn("Tr: Unknown tag ", tagName, 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 tr;
+}
+
+export { parseTr };

package/esm/parse/parseTrPr.d.ts

@@ -0,0 +1,3 @@
+import { TrPr } from '../openxml/word/table/Tr';
+import Word from '../Word';
+export declare function parseTrPr(word: Word, element: Element): TrPr;

package/esm/parse/parseTrPr.js

@@ -0,0 +1,59 @@
+import { __values } from 'tslib';
+import { getVal, getValBoolean } from '../OpenXML.js';
+import { jcToTextAlign } from './jcToTextAlign.js';
+import { parseTablePr } from './parseTablePr.js';
+import { parseTblCellSpacing } from './parseTcPr.js';
+import { parseTrHeight } from './parseTrHeight.js';
+
+function parseTrPr(word, element) {
+    var e_1, _a;
+    var cssStyle = {};
+    var tcStyle = {};
+    try {
+        for (var _b = __values(element.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
+            var tagName = child.tagName;
+            switch (tagName) {
+                case 'w:hidden':
+                    if (getValBoolean(child)) {
+                        cssStyle.display = 'none';
+                    }
+                    break;
+                case 'w:trHeight':
+                    parseTrHeight(child, cssStyle);
+                    break;
+                case 'w:jc':
+                    cssStyle['text-align'] = jcToTextAlign(getVal(child));
+                    break;
+                case 'w:cantSplit':
+                    // 目前也不支持分页
+                    break;
+                case 'w:tblPrEx':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/tblPrEx_1.html
+                    var tablePr = parseTablePr(word, child);
+                    Object.assign(cssStyle, tablePr.cssStyle);
+                    break;
+                case 'w:tblCellSpacing':
+                    parseTblCellSpacing(child, tcStyle);
+                    break;
+                case 'w:cnfStyle':
+                    // 目前是自动计算的，所以不需要这个了
+                    break;
+                default:
+                    console.warn("Tr: Unknown tag ", tagName, 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 {
+        cssStyle: cssStyle
+    };
+}
+
+export { parseTrPr };

package/esm/render/fixAbsolutePosition.d.ts

@@ -0,0 +1,8 @@
+import { CSSStyle } from '../openxml/Style';
+import Word from '../Word';
+/**
+ * 修复绝对定位的位置，主要是加上 padding，因为 html 中的定位是不考虑 padding 的
+ * @param word
+ * @param style
+ */
+export declare function fixAbsolutePosition(word: Word, style: CSSStyle, inHeader?: boolean): void;

package/esm/render/renderBody.d.ts

@@ -1,6 +1,10 @@
 /**
  * 渲染 body 节点
  */
-import Word from '../Word';
+import Word, { WordRenderOptions } from '../Word';
 import { Body } from '../openxml/word/Body';
-export default function renderBody(word: Word, parent: HTMLElement, body: Body): void;
+import { WDocument } from '../openxml/word/WDocument';
+/**
+ * 渲染文档主体
+ */
+export default function renderBody(root: HTMLElement, word: Word, bodyEl: HTMLElement, wDocument: WDocument, body: Body, renderOptions: WordRenderOptions): void;

package/esm/render/renderBody.js

@@ -1,8 +1,7 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
-import { appendChild } from '../util/dom.js';
+import { __values, __spreadArray, __read } from 'tslib';
+import { appendChild, removeChild } from '../util/dom.js';
 import { Paragraph } from '../openxml/word/Paragraph.js';
 import { Table } from '../openxml/word/Table.js';
-import { Hyperlink } from '../openxml/word/Hyperlink.js';
 import renderParagraph from './renderParagraph.js';
 import { renderSection } from './renderSection.js';
 import renderTable from './renderTable.js';
@@ -10,44 +9,199 @@ import renderTable from './renderTable.js';
 /**
  * 渲染 body 节点
  */
-function renderBody(word, parent, body) {
-    var e_1, _a, e_2, _b;
-    try {
-        for (var _c = __values(body.sections), _d = _c.next(); !_d.done; _d = _c.next()) {
-            var section = _d.value;
-            var sectionEl = renderSection(word, section);
-            appendChild(parent, sectionEl);
-            try {
-                for (var _e = (e_2 = void 0, __values(section.children)), _f = _e.next(); !_f.done; _f = _e.next()) {
-                    var child = _f.value;
-                    if (child instanceof Paragraph) {
-                        var p = renderParagraph(word, child);
-                        appendChild(sectionEl, p);
-                    }
-                    else if (child instanceof Table) {
-                        appendChild(sectionEl, renderTable(word, child));
-                    }
-                    else if (child instanceof Hyperlink) {
-                    }
+/**
+ * 判断是否需要创建一个新 section，包括强制分页和超出了 section 的高宽或宽度
+ */
+function createNewSection(word, sectionEnd, child) {
+    // 支持插入分页符
+    if (word.breakPage) {
+        word.breakPage = false;
+        return true;
+    }
+    var childBound = child.getBoundingClientRect();
+    return (childBound.top + childBound.height > sectionEnd.bottom ||
+        // 注意这里没有 + childBound.width，因为 width 一般都是 100% 导致容易超出
+        childBound.left > sectionEnd.right);
+}
+/**
+ * 添加到 section 里，如果超出了就创建一个新的 section
+ */
+function appendToSection(word, wDocument, renderOptions, bodyEl, sectionEl, sectionEnd, section, child) {
+    // 如果是第一个节点，即便超长也得写入，不然就会出现一个空 section
+    var isFirst = sectionEl.children.length === 0;
+    // 首先尝试写入
+    appendChild(sectionEl, child);
+    // 如果超出了就新建一个 section
+    if (!isFirst && createNewSection(word, sectionEnd, child)) {
+        var newChild = child.cloneNode(true);
+        removeChild(sectionEl, child);
+        var newSectionEl = renderSection(word, wDocument, section, renderOptions);
+        appendChild(bodyEl, newSectionEl);
+        appendChild(newSectionEl, newChild);
+        sectionEnd = getSectionEnd(section, newSectionEl);
+        return { sectionEl: newSectionEl, sectionEnd: sectionEnd };
+    }
+    return { sectionEl: sectionEl, sectionEnd: sectionEnd };
+}
+/**
+ * 获取 section 结束的位置，也就是最后能放下子元素的位置
+ */
+function getSectionEnd(section, sectionEl) {
+    var sectionBound = sectionEl.getBoundingClientRect();
+    var pageMargin = section.properties.pageMargin;
+    var bottom = sectionBound.top + sectionBound.height;
+    if (pageMargin === null || pageMargin === void 0 ? void 0 : pageMargin.bottom) {
+        bottom = bottom - parseInt(pageMargin.bottom.replace('px', ''), 10);
+    }
+    var right = sectionBound.left + sectionBound.width;
+    if (pageMargin === null || pageMargin === void 0 ? void 0 : pageMargin.right) {
+        right = right - parseInt(pageMargin.right.replace('px', ''), 10);
+    }
+    return { bottom: bottom, right: right };
+}
+/**
+ * 获取缩放比例
+ */
+function getTransform(rootWidth, section, renderOptions) {
+    var props = section.properties;
+    var pageSize = props.pageSize;
+    if (renderOptions.zoomFitWidth && !renderOptions.ignoreWidth) {
+        var pageWidth = pageSize === null || pageSize === void 0 ? void 0 : pageSize.width;
+        if (rootWidth && pageWidth) {
+            var pageWidthNum = parseInt(pageWidth.replace('px', ''), 10);
+            if (props.pageMargin) {
+                var pageMargin = props.pageMargin;
+                pageWidthNum += pageMargin.left
+                    ? parseInt(pageMargin.left.replace('px', ''), 10)
+                    : 0;
+                pageWidthNum += pageMargin.right
+                    ? parseInt(pageMargin.right.replace('px', ''), 10)
+                    : 0;
+            }
+            var zoomWidth = rootWidth / pageWidthNum;
+            return zoomWidth;
+        }
+    }
+    return 1;
+}
+/**
+ * 分页渲染
+ * @param isLastSection 是否是最后一节
+ */
+function renderSectionInPage(word, wDocument, bodyEl, renderOptions, sectionEl, section, isLastSection) {
+    // 如果不 setTimeout 取到的位置信息不对
+    setTimeout(function () {
+        var e_1, _a;
+        var sectionEnd = getSectionEnd(section, sectionEl);
+        try {
+            for (var _b = __values(section.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                if (child instanceof Paragraph) {
+                    var p = renderParagraph(word, child);
+                    var appendResult = appendToSection(word, wDocument, renderOptions, bodyEl, sectionEl, sectionEnd, section, p);
+                    sectionEl = appendResult.sectionEl;
+                    sectionEnd = appendResult.sectionEnd;
+                }
+                else if (child instanceof Table) {
+                    var table = renderTable(word, child);
+                    var appendResult = appendToSection(word, wDocument, renderOptions, bodyEl, sectionEl, sectionEnd, section, table);
+                    sectionEl = appendResult.sectionEl;
+                    sectionEnd = appendResult.sectionEnd;
+                }
+                else {
+                    console.warn('unknown child', child);
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
+        }
+        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 (isLastSection) {
+            sectionEl.style.marginBottom = '0';
+        }
+    }, 0);
+}
+/**
+ * 渲染文档主体
+ */
+function renderBody(root, word, bodyEl, wDocument, body, renderOptions) {
+    var e_2, _a, e_3, _b;
+    var page = renderOptions.page || false;
+    var rootWidth = root.getBoundingClientRect().width -
+        (renderOptions.pageWrapPadding || 0) * 2;
+    var zooms = [];
+    var index = 0;
+    var sections = body.sections;
+    var sectionLength = sections.length;
+    // 用于最后一个 section 不加 margin-bottom
+    var isLastSection = false;
+    try {
+        for (var sections_1 = __values(sections), sections_1_1 = sections_1.next(); !sections_1_1.done; sections_1_1 = sections_1.next()) {
+            var section = sections_1_1.value;
+            zooms.push(getTransform(rootWidth, section, renderOptions));
+            word.currentSection = section;
+            var sectionEl = renderSection(word, wDocument, section, renderOptions);
+            appendChild(bodyEl, sectionEl);
+            index = index + 1;
+            if (index === sectionLength) {
+                isLastSection = true;
+            }
+            if (page) {
+                renderSectionInPage(word, wDocument, bodyEl, renderOptions, sectionEl, section, isLastSection);
+            }
+            else {
                 try {
-                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                    for (var _c = (e_3 = void 0, __values(section.children)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var child = _d.value;
+                        if (child instanceof Paragraph) {
+                            var p = renderParagraph(word, child);
+                            appendChild(sectionEl, p);
+                        }
+                        else if (child instanceof Table) {
+                            var table = renderTable(word, child);
+                            appendChild(sectionEl, table);
+                        }
+                        else {
+                            console.warn('unknown child', child);
+                        }
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    }
+                    finally { if (e_3) throw e_3.error; }
                 }
-                finally { if (e_2) throw e_2.error; }
             }
-            appendChild(parent, sectionEl);
         }
     }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
     finally {
         try {
-            if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            if (sections_1_1 && !sections_1_1.done && (_a = sections_1.return)) _a.call(sections_1);
         }
-        finally { if (e_1) throw e_1.error; }
+        finally { if (e_2) throw e_2.error; }
     }
+    setTimeout(function () {
+        if (renderOptions.zoom) {
+            // 固定缩放
+            bodyEl.style.transformOrigin = '0 0';
+            bodyEl.style.transform = "scale(".concat(renderOptions.zoom, ")");
+        }
+        else if (renderOptions.page &&
+            renderOptions.zoomFitWidth &&
+            !renderOptions.ignoreWidth) {
+            // 自适应宽度的缩放
+            var minZoom = Math.min.apply(Math, __spreadArray([], __read(zooms), false));
+            bodyEl.style.transformOrigin = '0 0';
+            bodyEl.style.transform = "scale(".concat(minZoom, ")");
+        }
+    }, 0);
 }
 
 export { renderBody as default };

package/esm/render/renderBr.d.ts

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

package/esm/render/renderBr.js

@@ -5,7 +5,10 @@ import { createElement } from '../util/dom.js';
  * 其实还有 column 和 page，但目前还没实现分页渲染，所以目前先简单处理，后续再看看如何处理
  * @returns 生成的 dom 结构
  */
-function renderBr(brak) {
+function renderBr(word, brak) {
+    if (brak.type === 'page') {
+        word.breakPage = true;
+    }
     var br = createElement('br');
     return br;
 }

package/esm/render/renderCustGeom.d.ts

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

package/esm/render/renderCustGeom.js

@@ -0,0 +1,10 @@
+import { shapeToSVG } from '../openxml/drawing/svg/shapeToSVG.js';
+
+function renderCustGeom(geom, shapePr, width, height, wpsStyle) {
+    if (geom.shape) {
+        return shapeToSVG(geom.shape, [], shapePr, width, height, wpsStyle);
+    }
+    return null;
+}
+
+export { renderCustGeom };

package/esm/render/renderDocument.d.ts

@@ -1,7 +1,7 @@
-import Word from '../Word';
+import Word, { WordRenderOptions } 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;
+export default function renderDocument(root: HTMLElement, word: Word, wDocument: WDocument, renderOptions: WordRenderOptions): HTMLElement;

package/esm/render/renderDocument.js

@@ -5,9 +5,9 @@ import renderBody from './renderBody.js';
  * 渲染 document 主要入口
  * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/document.html
  */
-function renderDocument(word, document) {
+function renderDocument(root, word, wDocument, renderOptions) {
     var doc = createElement('article');
-    renderBody(word, doc, document.body);
+    renderBody(root, word, doc, wDocument, wDocument.body, renderOptions);
     return doc;
 }
 

package/esm/render/renderDrawing.d.ts

@@ -1,8 +1,9 @@
 import Word from '../Word';
-import { Drawing } from '../openxml/word/drawing/Drawing';
+import { Drawing } from '../openxml/drawing/Drawing';
 /**
  * 渲染图片，目前只支持 picture
  * http://officeopenxml.com/drwOverview.php
+ * @param inHeader，如果在 header 中，位置计算要特殊处理
  *
  */
-export declare function renderDrawing(word: Word, drawing: Drawing): HTMLElement | null;
+export declare function renderDrawing(word: Word, drawing: Drawing, inHeader?: boolean): HTMLElement | null;