office-viewer 0.1.0

package/esm/parse/parsePr.js

@@ -0,0 +1,325 @@
+import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { ST_TextAlignment, ST_VerticalAlignRun } from '../openxml/Types.js';
+import { parseSize, LengthUsage } from './parseSize.js';
+import { getValBoolean, getVal } from '../OpenXML.js';
+import { parseBorder, parseBorders } from './parseBorder.js';
+import { parseColorAttr, parseShdColor, parseColor } from './parseColor.js';
+import { parseInd } from './parseInd.js';
+import { parseSpacing } from './parseSpacing.js';
+import { parseFont } from './parseFont.js';
+import { parseTrHeight } from './parseTrHeight.js';
+import { jcToTextAlign } from './jcToTextAlign.js';
+import { parseTextDirection } from './parseTextDirection.js';
+
+/**
+ * 解析 underline 并附上样式
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/u.html
+ */
+function parseUnderline(word, element, style) {
+    var val = getVal(element);
+    if (val == null)
+        return;
+    switch (val) {
+        case 'dash':
+        case 'dashDotDotHeavy':
+        case 'dashDotHeavy':
+        case 'dashedHeavy':
+        case 'dashLong':
+        case 'dashLongHeavy':
+        case 'dotDash':
+        case 'dotDotDash':
+            style['text-decoration-style'] = 'dashed';
+            break;
+        case 'dotted':
+        case 'dottedHeavy':
+            style['text-decoration-style'] = 'dotted';
+            break;
+        case 'double':
+            style['text-decoration-style'] = 'double';
+            break;
+        case 'single':
+        case 'thick':
+            style['text-decoration'] = 'underline';
+            break;
+        case 'wave':
+        case 'wavyDouble':
+        case 'wavyHeavy':
+            style['text-decoration-style'] = 'wavy';
+            break;
+        case 'words':
+            style['text-decoration'] = 'underline';
+            break;
+        case 'none':
+            style['text-decoration'] = 'none';
+            break;
+    }
+    var color = parseColorAttr(word, element);
+    if (color) {
+        style['text-decoration-color'] = color;
+    }
+}
+/**
+ * 目前只有部分支持
+ * http://officeopenxml.com/WPparagraph-textFrames.php
+ */
+function parseFrame(element, style) {
+    var e_1, _a;
+    try {
+        for (var _b = __values(element.attributes), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var attribute = _c.value;
+            var name_1 = attribute.name;
+            var value = attribute.value;
+            switch (name_1) {
+                case 'w:dropCap':
+                    if (value === 'drop') {
+                        style['float'] = 'left';
+                    }
+                    break;
+                case 'w:h':
+                    if (typeof value === 'object' && !Array.isArray(value)) {
+                        style['height'] = parseSize(value, 'w:h');
+                    }
+                    break;
+                case 'w:w':
+                    if (typeof value === 'object' && !Array.isArray(value)) {
+                        style['width'] = parseSize(value, 'w:w');
+                    }
+                    break;
+                default:
+                    console.warn('parseFrame: unknown attribute ' + name_1, attribute);
+            }
+        }
+    }
+    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; }
+    }
+}
+var HighLightColor = 'transparent';
+/**
+ * 解析各种 pPr 及 rPr，返回样式
+ * @param type 所属类型
+ * @returns 样式
+ */
+function parsePr(word, element, type) {
+    var e_2, _a;
+    var 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:sz':
+                case 'w:szCs':
+                    style['font-size'] = parseSize(child, 'w:val', LengthUsage.FontSize);
+                    break;
+                case 'w:jc':
+                    style['text-align'] = jcToTextAlign(getVal(child));
+                    break;
+                case 'w:framePr':
+                    parseFrame(child, style);
+                    break;
+                case 'w:pBdr':
+                    parseBorders(word, child, style);
+                    break;
+                case 'w:ind':
+                    parseInd(child, style);
+                    break;
+                case 'w:color':
+                    style['color'] = parseColor(word, child);
+                    break;
+                case 'w:shd':
+                    // 如果已经有设置说明是 highlight
+                    if (!('background-color' in style)) {
+                        // http://officeopenxml.com/WPshading.php
+                        style['background-color'] = parseShdColor(word, child);
+                    }
+                    break;
+                case 'w:spacing':
+                    parseSpacing(word, child, style);
+                    break;
+                case 'w:highlight':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/highlight.html
+                    // 这个按文档是重要性高于 shd
+                    style['background-color'] = parseColorAttr(word, child, 'w:fill', HighLightColor);
+                    break;
+                case 'w:vertAlign':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/vertAlign.html
+                    // 这个其实和 position 有冲突，但预计这两个同时出现的概率不高
+                    var vertAlign = getVal(child);
+                    if (vertAlign === ST_VerticalAlignRun.superscript) {
+                        style['vertical-align'] = 'super';
+                    }
+                    else if (vertAlign === ST_VerticalAlignRun.subscript) {
+                        style['vertical-align'] = 'sub';
+                    }
+                    break;
+                case 'w:position':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/position.html
+                    style['vertical-align'] = parseSize(child, 'w:val', LengthUsage.FontSize);
+                    break;
+                case 'w:trHeight':
+                    parseTrHeight(child, style);
+                    break;
+                case 'w:strike':
+                case 'w:dstrike':
+                    // 其实不支持 dstrike，都统一为 strike
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/dstrike.html
+                    style['text-decoration'] = getValBoolean(child)
+                        ? 'line-through'
+                        : 'none';
+                    break;
+                case 'w:b':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/b.html
+                    style['font-weight'] = getValBoolean(child) ? 'bold' : 'normal';
+                    break;
+                case 'w:adjustRightInd':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/adjustRightInd.html
+                    // 似乎没法处理
+                    break;
+                case 'w:bCs':
+                case 'w:iCs':
+                    // 忽略，因为 CSS 没法按这个判断
+                    break;
+                case 'w:i':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/i.html
+                    style['font-style'] = getValBoolean(child) ? 'italic' : 'normal';
+                    break;
+                case 'w:caps':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/caps.html
+                    style['text-transform'] = getValBoolean(child) ? 'uppercase' : 'normal';
+                    break;
+                case 'w:smallCaps':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/smallCaps.html
+                    style['text-transform'] = getValBoolean(child) ? 'lowercase' : 'normal';
+                    break;
+                case 'w:u':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/u.html
+                    parseUnderline(word, child, style);
+                    break;
+                case 'w:rFonts':
+                    parseFont(word, child, style);
+                    break;
+                case 'w:tblCellSpacing':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/tblCellSpacing_1.html
+                    style['border-spacing'] = parseSize(child, 'w:w');
+                    style['border-collapse'] = 'separate';
+                    break;
+                case 'w:bdr':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/bdr.html
+                    style['border'] = parseBorder(word, child);
+                    break;
+                case 'w:vanish':
+                    if (getValBoolean(child)) {
+                        // 这里其实没试过 word 里到底是不是 none
+                        style['display'] = 'none';
+                    }
+                    break;
+                case 'w:kern':
+                    // todo: 这里显示不正确
+                    // style['letter-spacing'] = parseSize(
+                    //   child,
+                    //   'w:val',
+                    //   LengthUsage.FontSize
+                    // );
+                    break;
+                case 'w:pStyle':
+                    // 这个需要特殊处理
+                    break;
+                case 'w:lang':
+                case 'w:noProof':
+                    // 用于拼写检查
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/lang.html
+                    break;
+                case 'w:keepLines':
+                case 'w:keepNext':
+                case 'w:widowControl':
+                case 'w:pageBreakBefore':
+                    // 用于分页的场景，目前还不支持 TODO:
+                    break;
+                case 'w:outlineLvl':
+                    // 似乎是用于目录的，目前还不支持
+                    break;
+                case 'w:contextualSpacing':
+                    // 还没空看
+                    break;
+                case 'w:numPr':
+                    // 这个在 parseParagraphProperties 里处理了
+                    break;
+                case 'w:rPr':
+                    // TODO: 这个有时候会不正确，需要再看看
+                    break;
+                case 'w:rStyle':
+                    // 在 Run 里地方处理了
+                    break;
+                case 'w:webHidden':
+                    // web 模式隐藏
+                    style['display'] = 'none';
+                    break;
+                case 'w:tabs':
+                    // 这个在 parseParagraphProperties 里处理了
+                    break;
+                case 'w:snapToGrid':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/snapToGrid_2.html
+                    // 目前还不支持 grid
+                    break;
+                case 'w:wordWrap':
+                    // 不太确定这里是用 word-break 还是 overflow-wrap
+                    if (getValBoolean(child)) {
+                        style['word-break'] = 'break-all';
+                    }
+                    break;
+                case 'w:textAlignment':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/textAlignment.html
+                    var alignment = getVal(child);
+                    if (alignment === ST_TextAlignment.center) {
+                        style['vertical-align'] = 'middle';
+                    }
+                    else if (alignment !== ST_TextAlignment.auto) {
+                        style['vertical-align'] = alignment;
+                    }
+                    break;
+                case 'w:textDirection':
+                    parseTextDirection(child, style);
+                    break;
+                case 'w:cnfStyle':
+                    // 目前是自动计算的，所以不需要这个了
+                    break;
+                case 'w:bidi':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/bidi_1.html
+                    // TODO: 还不清楚和 w:textDirection 是什么关系
+                    if (getValBoolean(child, true)) {
+                        console.warn('w:bidi is not supported.');
+                    }
+                    break;
+                case 'w:autoSpaceDE':
+                case 'w:autoSpaceDN':
+                    // 这个在其它地方实现了
+                    break;
+                case 'w:kinsoku':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/kinsoku.html
+                    // 控制不了所以忽略了
+                    break;
+                case 'w:overflowPunct':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/overflowPunct.html
+                    // 支持不了
+                    break;
+                default:
+                    console.warn('parsePr Unknown tagName', tagName, child);
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return style;
+}
+
+export { parsePr };

package/esm/parse/parseRelationship.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 解析 _rels/.rels 文件
+ */
+export interface Relationship {
+    id: string;
+    type: string;
+    target: string;
+    targetMode?: string;
+    part: 'root' | 'word';
+}
+export declare function parseRelationship(element: Element, part: 'root' | 'word'): Relationship;
+export declare function parseRelationships(element: Document, part: 'root' | 'word'): Record<string, Relationship>;

package/esm/parse/parseRelationship.js

@@ -0,0 +1,40 @@
+import { __values } from '../node_modules/tslib/tslib.es6.js';
+
+/**
+ * 解析 _rels/.rels 文件
+ */
+function parseRelationship(element, part) {
+    var id = element.getAttribute('Id') || '';
+    var type = element.getAttribute('Type') || '';
+    var target = element.getAttribute('Target') || '';
+    var targetMode = element.getAttribute('TargetMode') || '';
+    return {
+        id: id,
+        type: type,
+        target: target,
+        targetMode: targetMode,
+        part: part
+    };
+}
+function parseRelationships(element, part) {
+    var e_1, _a;
+    var relationships = {};
+    var relationshipElements = element.getElementsByTagName('Relationship');
+    try {
+        for (var relationshipElements_1 = __values(relationshipElements), relationshipElements_1_1 = relationshipElements_1.next(); !relationshipElements_1_1.done; relationshipElements_1_1 = relationshipElements_1.next()) {
+            var relationshipElement = relationshipElements_1_1.value;
+            var relationship = parseRelationship(relationshipElement, part);
+            relationships[relationship.id] = relationship;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (relationshipElements_1_1 && !relationshipElements_1_1.done && (_a = relationshipElements_1.return)) _a.call(relationshipElements_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return relationships;
+}
+
+export { parseRelationship, parseRelationships };

package/esm/parse/parseSize.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 单位相关的解析，参考了 docxjs 里的实现
+ */
+export type LengthType = 'px' | 'pt' | '%' | '';
+export type LengthUsageType = {
+    mul: number;
+    unit: LengthType;
+};
+export declare const LengthUsage: Record<string, LengthUsageType>;
+export declare function convertLength(val: string, usage?: LengthUsageType): string;
+/**
+ * 转换布尔值
+ */
+export declare function convertBoolean(v: string, defaultValue?: boolean): boolean;
+export declare function convertPercentage(val: string): number;
+/**
+ * 解析尺寸，返回 css 值
+ *
+ * @param element 节点
+ * @param attrName 属性名
+ * @param usage 类型
+ */
+export declare function parseSize(element: Element, attrName: string, usage?: LengthUsageType): string;
+/**
+ * 参考 docxjs 的方法，后面可以优化一下，不使用 calc
+ */
+export declare function addSize(a: string, b: string): string;

package/esm/parse/parseSize.js

@@ -0,0 +1,38 @@
+/**
+ * 单位相关的解析，参考了 docxjs 里的实现
+ */
+var ptToPx = 1.3333;
+var LengthUsage = {
+    Dxa: { mul: ptToPx * 0.05, unit: 'px' },
+    Emu: { mul: (ptToPx * 1) / 12700, unit: 'px' },
+    FontSize: { mul: ptToPx * 0.5, unit: 'px' },
+    Border: { mul: ptToPx * 0.125, unit: 'px' },
+    Point: { mul: ptToPx * 1, unit: 'px' },
+    Percent: { mul: 0.02, unit: '%' },
+    LineHeight: { mul: 1 / 240, unit: '' },
+    VmlEmu: { mul: 1 / 12700, unit: '' }
+};
+function convertLength(val, usage) {
+    if (usage === void 0) { usage = LengthUsage.Dxa; }
+    if (val == null || /.+(p[xt]|[%])$/.test(val)) {
+        return val;
+    }
+    return "".concat((parseInt(val) * usage.mul).toFixed(2)).concat(usage.unit);
+}
+/**
+ * 解析尺寸，返回 css 值
+ *
+ * @param element 节点
+ * @param attrName 属性名
+ * @param usage 类型
+ */
+function parseSize(element, attrName, usage) {
+    if (usage === void 0) { usage = LengthUsage.Dxa; }
+    var size = element.getAttribute(attrName);
+    if (size) {
+        return convertLength(String(size), usage);
+    }
+    return '';
+}
+
+export { LengthUsage, convertLength, parseSize };

package/esm/parse/parseSpacing.d.ts

@@ -0,0 +1,7 @@
+import { CSSStyle } from '../openxml/Style';
+import Word from '../Word';
+/**
+ * 解析 spacing
+ * http://officeopenxml.com/WPspacing.php
+ */
+export declare function parseSpacing(word: Word, element: Element, style: CSSStyle): void;

package/esm/parse/parseSpacing.js

@@ -0,0 +1,43 @@
+import { parseSize } from './parseSize.js';
+
+/**
+ * 解析 spacing
+ * http://officeopenxml.com/WPspacing.php
+ */
+function parseSpacing(word, element, style) {
+    var before = parseSize(element, 'w:before');
+    var after = parseSize(element, 'w:after');
+    var lineRule = element.getAttribute('w:lineRule');
+    if (before) {
+        style['margin-top'] = before;
+    }
+    if (after) {
+        style['margin-bottom'] = after;
+    }
+    var line = element.getAttribute('w:line');
+    if (line) {
+        // 强制行高
+        if (word.renderOptions.forceLineHeight) {
+            style['line-height'] = word.renderOptions.forceLineHeight;
+            return;
+        }
+        var lineNum = parseInt(line, 10);
+        var minLineHeight = word.renderOptions.minLineHeight || 1.0;
+        switch (lineRule) {
+            case 'auto':
+                var lineHeight = Math.max(minLineHeight, lineNum / 240);
+                style['line-height'] = "".concat(lineHeight.toFixed(2));
+                break;
+            case 'atLeast':
+                // 不知道这样处理是否正确，先用默认好了
+                // style['line-height'] = `calc(100% + ${lineNum / 20}pt)`;
+                break;
+            default:
+                var lineHeightMin = Math.max(minLineHeight, lineNum / 20);
+                style['line-height'] = style['min-height'] = "".concat(lineHeightMin, "pt");
+                break;
+        }
+    }
+}
+
+export { parseSpacing };

package/esm/parse/parseTextDirection.d.ts

@@ -0,0 +1,2 @@
+import { CSSStyle } from '../openxml/Style';
+export declare function parseTextDirection(element: Element, style: CSSStyle): void;

package/esm/parse/parseTextDirection.js

@@ -0,0 +1,25 @@
+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 'btLr':
+        case 'lrTb':
+        case 'lrTbV':
+        case 'tbLrV':
+            style['direction'] = 'ltr';
+            break;
+        case ST_TextDirection.rl:
+        case ST_TextDirection.rlV:
+        case 'tbRl':
+        case 'tbRlV':
+            style['direction'] = 'rtl';
+            break;
+    }
+}
+
+export { parseTextDirection };

package/esm/parse/parseTrHeight.d.ts

@@ -0,0 +1,2 @@
+import { CSSStyle } from '../openxml/Style';
+export declare function parseTrHeight(child: Element, style: CSSStyle): void;

package/esm/parse/parseTrHeight.js

@@ -0,0 +1,17 @@
+import { parseSize } from './parseSize.js';
+
+// http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/trHeight.html
+function parseTrHeight(child, style) {
+    var height = parseSize(child, 'w:val');
+    var hRule = child.getAttribute('w:hRule');
+    if (hRule === 'exact') {
+        style['height'] = height;
+    }
+    else if (hRule === 'atLeast') {
+        // tr 设置 min-height 似乎是没效果的
+        style['height'] = height;
+        style['min-height'] = height;
+    }
+}
+
+export { parseTrHeight };

package/esm/render/renderBody.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 渲染 body 节点
+ */
+import Word from '../Word';
+import { Body } from '../openxml/word/Body';
+export default function renderBody(word: Word, parent: HTMLElement, body: Body): void;

package/esm/render/renderBody.js

@@ -0,0 +1,53 @@
+import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { appendChild } 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';
+
+/**
+ * 渲染 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) {
+                    }
+                }
+            }
+            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; }
+            }
+            appendChild(parent, sectionEl);
+        }
+    }
+    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; }
+    }
+}
+
+export { renderBody as default };

package/esm/render/renderBookmark.d.ts

@@ -0,0 +1,6 @@
+import { BookmarkStart } from '../openxml/word/Bookmark';
+import Word from '../Word';
+/**
+ * 渲染书签
+ */
+export declare function renderBookmarkStart(word: Word, bookmarkStart: BookmarkStart): HTMLAnchorElement | null;

package/esm/render/renderBookmark.js

@@ -0,0 +1,17 @@
+import { createElement } from '../util/dom.js';
+
+/**
+ * 渲染书签
+ */
+function renderBookmarkStart(word, bookmarkStart) {
+    var name = bookmarkStart.name;
+    if (name) {
+        var bookmark = createElement('a');
+        bookmark.name = name;
+        bookmark.id = name;
+        return bookmark;
+    }
+    return null;
+}
+
+export { renderBookmarkStart };

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

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

package/esm/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;