office-viewer 0.1.0 → 0.1.4

package/lib/parse/parseChildColor.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OpenXML = require('../OpenXML.js');
+var color = require('../util/color.js');
+var colorNameMap = require('./colorNameMap.js');
+var modifyColor = require('./modifyColor.js');
+
+/**
+ * 解析子节点颜色，这里其实还有 lumMod 和 lumOff
+ */
+function parseChildColor(word, element) {
+    var colorChild = element.firstElementChild;
+    if (colorChild) {
+        var colorType = colorChild.tagName;
+        switch (colorType) {
+            case 'a:prstClr':
+                var color$1 = OpenXML.getVal(colorChild) || '';
+                if (color$1 in colorNameMap.PresetColorMap) {
+                    return modifyColor.modifyColor(colorChild, colorNameMap.PresetColorMap[color$1]);
+                }
+                else {
+                    console.warn('parseOutline: Unknown color ', color$1, colorChild);
+                }
+                break;
+            case 'a:srgbClr':
+            case 'a:scrgbClr':
+            case 'w14:srgbClr':
+                var rgbColor = OpenXML.getVal(colorChild);
+                if (rgbColor) {
+                    return modifyColor.modifyColor(colorChild, '#' + rgbColor);
+                }
+                var r = OpenXML.getAttrPercent(colorChild, 'r');
+                var g = OpenXML.getAttrPercent(colorChild, 'g');
+                var b = OpenXML.getAttrPercent(colorChild, 'b');
+                var scrgbColor = color.Color.fromRGB(r, g, b);
+                return modifyColor.modifyColor(colorChild, scrgbColor.toHex());
+            case 'a:hslClr':
+                var h = OpenXML.getAttrPercent(colorChild, 'r');
+                var s = OpenXML.getAttrPercent(colorChild, 'g');
+                var l = OpenXML.getAttrPercent(colorChild, 'b');
+                var val = OpenXML.getVal(colorChild);
+                // 文档例子里有，不确定
+                if (val) {
+                    return modifyColor.modifyColor(colorChild, '#' + val);
+                }
+                var hslColor = color.Color.fromHSL(h, s, l);
+                return modifyColor.modifyColor(colorChild, hslColor.toHex());
+            case 'a:schemeClr':
+            case 'w14:schemeClr':
+                var schemeClr = OpenXML.getVal(colorChild);
+                if (schemeClr) {
+                    return modifyColor.modifyColor(colorChild, word.getThemeColor(schemeClr));
+                }
+                else {
+                    console.warn('parseOutline: Unknown schemeClr ', colorChild);
+                }
+                break;
+            case 'a:sysClr':
+                // 这里每个系统不一样，所以直接依赖浏览器的能力
+                return OpenXML.getVal(colorChild);
+            default:
+                console.warn('parseOutline: Unknown color type ', colorType, colorChild);
+        }
+    }
+    return '';
+}
+
+exports.parseChildColor = parseChildColor;

package/lib/parse/parseColor.d.ts

@@ -2,6 +2,10 @@
  * 解析颜色，转成 css 的颜色
  */
 import Word from '../Word';
+/**
+ * css 里可以识别的颜色
+ */
+export declare const cssColors: string[];
 /**
  *
  * 解析属性上的 color，比如  <w:top w:val="single" w:sz="24" w:space="1" w:color="FF0000" />

package/lib/parse/parseColor.js

@@ -3,30 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var OpenXML = require('../OpenXML.js');
-var Types = require('../openxml/Types.js');
+var colorNameMap = require('./colorNameMap.js');
 
 /**
  * 解析颜色，转成 css 的颜色
  */
-var knownColors = [
-    'black',
-    'blue',
-    'cyan',
-    'darkBlue',
-    'darkCyan',
-    'darkGray',
-    'darkGreen',
-    'darkMagenta',
-    'darkRed',
-    'darkYellow',
-    'green',
-    'lightGray',
-    'magenta',
-    'none',
-    'red',
-    'white',
-    'yellow'
-];
+/**
+ * css 里可以识别的颜色
+ */
+var cssColors = ['black', 'blue', 'green', 'red', 'white', 'yellow'];
 /**
  *
  * 解析属性上的 color，比如  <w:top w:val="single" w:sz="24" w:space="1" w:color="FF0000" />
@@ -41,10 +26,16 @@ function parseColorAttr(word, element, attrName, autoColor) {
     if (color) {
         if (color == 'auto') {
             return autoColor;
+            /**
+             * css 里可以识别的颜色
+             */
         }
-        else if (typeof color === 'string' && knownColors.includes(color)) {
+        else if (cssColors.includes(color)) {
             return color;
         }
+        else if (color in colorNameMap.PresetColorMap) {
+            return colorNameMap.PresetColorMap[color];
+        }
         return "#".concat(color);
     }
     var themeColor = element.getAttribute('w:themeColor');
@@ -58,55 +49,55 @@ function parseShdColor(word, element) {
     var color = element.getAttribute('w:fill') || '';
     var val = OpenXML.getVal(element);
     if (color === 'auto') {
-        color = 'inherit';
+        color = 'FFFFFF';
     }
     if (color.length === 6) {
         switch (val) {
-            case Types.ST_Shd.clear:
+            case 'clear':
                 return "#".concat(color);
-            case Types.ST_Shd.pct10:
+            case 'pct10':
                 return colorPercent(color, 0.1);
-            case Types.ST_Shd.pct12:
+            case 'pct12':
                 return colorPercent(color, 0.125);
-            case Types.ST_Shd.pct15:
+            case 'pct15':
                 return colorPercent(color, 0.15);
-            case Types.ST_Shd.pct20:
+            case 'pct20':
                 return colorPercent(color, 0.2);
-            case Types.ST_Shd.pct25:
+            case 'pct25':
                 return colorPercent(color, 0.25);
-            case Types.ST_Shd.pct30:
+            case 'pct30':
                 return colorPercent(color, 0.3);
-            case Types.ST_Shd.pct35:
+            case 'pct35':
                 return colorPercent(color, 0.35);
-            case Types.ST_Shd.pct37:
+            case 'pct37':
                 return colorPercent(color, 0.375);
-            case Types.ST_Shd.pct40:
+            case 'pct40':
                 return colorPercent(color, 0.4);
-            case Types.ST_Shd.pct45:
+            case 'pct45':
                 return colorPercent(color, 0.45);
-            case Types.ST_Shd.pct5:
+            case 'pct5':
                 return colorPercent(color, 0.05);
-            case Types.ST_Shd.pct50:
+            case 'pct50':
                 return colorPercent(color, 0.5);
-            case Types.ST_Shd.pct55:
+            case 'pct55':
                 return colorPercent(color, 0.55);
-            case Types.ST_Shd.pct60:
+            case 'pct60':
                 return colorPercent(color, 0.6);
-            case Types.ST_Shd.pct65:
+            case 'pct65':
                 return colorPercent(color, 0.65);
-            case Types.ST_Shd.pct70:
+            case 'pct70':
                 return colorPercent(color, 0.7);
-            case Types.ST_Shd.pct75:
+            case 'pct75':
                 return colorPercent(color, 0.75);
-            case Types.ST_Shd.pct80:
+            case 'pct80':
                 return colorPercent(color, 0.8);
-            case Types.ST_Shd.pct85:
+            case 'pct85':
                 return colorPercent(color, 0.85);
-            case Types.ST_Shd.pct87:
+            case 'pct87':
                 return colorPercent(color, 0.87);
-            case Types.ST_Shd.pct90:
+            case 'pct90':
                 return colorPercent(color, 0.9);
-            case Types.ST_Shd.pct95:
+            case 'pct95':
                 return colorPercent(color, 0.95);
             default:
                 console.warn('unsupport shd val', val);
@@ -119,6 +110,10 @@ function parseShdColor(word, element) {
  * 用 alpha 来模拟 ptc 功能
  */
 function colorPercent(color, percent) {
+    // 白色取 alpha 没什么意义，转成黑色
+    if (color === 'FFFFFF') {
+        color = '000000';
+    }
     var r = parseInt(color.substring(0, 2), 16);
     var g = parseInt(color.substring(2, 4), 16);
     var b = parseInt(color.substring(4, 6), 16);
@@ -132,6 +127,7 @@ function parseColor(word, element) {
     return parseColorAttr(word, element, 'w:val');
 }
 
+exports.cssColors = cssColors;
 exports.parseColor = parseColor;
 exports.parseColorAttr = parseColorAttr;
 exports.parseShdColor = parseShdColor;

package/lib/parse/parseEndnotes.d.ts

@@ -0,0 +1,3 @@
+import Word from '../Word';
+import { Note } from '../openxml/word/Note';
+export declare function parseEndnotes(word: Word, doc: Document): Record<string, Note>;

package/lib/parse/parseEndnotes.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var Note = require('../openxml/word/Note.js');
+
+function parseEndnotes(word, doc) {
+    var e_1, _a;
+    var endnotes = {};
+    var endnotesElement = [].slice.call(doc.getElementsByTagName('w:endnote'));
+    try {
+        for (var endnotesElement_1 = tslib.__values(endnotesElement), endnotesElement_1_1 = endnotesElement_1.next(); !endnotesElement_1_1.done; endnotesElement_1_1 = endnotesElement_1.next()) {
+            var endnoteElement = endnotesElement_1_1.value;
+            var endnote = Note.Note.fromXML(word, endnoteElement);
+            endnotes[endnoteElement.getAttribute('w:id')] = endnote;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (endnotesElement_1_1 && !endnotesElement_1_1.done && (_a = endnotesElement_1.return)) _a.call(endnotesElement_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return endnotes;
+}
+
+exports.parseEndnotes = parseEndnotes;

package/lib/parse/parseFont.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 
 /**
  * 解析字体
@@ -16,7 +16,7 @@ function parseFont(word, element, style) {
     var fonts = [];
     var fontMapping = word.renderOptions.fontMapping;
     try {
-        for (var _b = tslib_es6.__values(element.attributes), _c = _b.next(); !_c.done; _c = _b.next()) {
+        for (var _b = tslib.__values(element.attributes), _c = _b.next(); !_c.done; _c = _b.next()) {
             var attribute = _c.value;
             var name_1 = attribute.name;
             var value = attribute.value;

package/lib/parse/parseInsideBorders.d.ts

@@ -0,0 +1,9 @@
+import Word from '../Word';
+/**
+ * parseBorders 不支持 insideH 和 insideV，所以单独支持一下
+ * 实际显示时需要过滤掉第一列
+ */
+export declare function parseInsideBorders(word: Word, element: Element): {
+    H: string | undefined;
+    V: string | undefined;
+};

package/lib/parse/parseInsideBorders.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var parseBorder = require('./parseBorder.js');
+
+/**
+ * parseBorders 不支持 insideH 和 insideV，所以单独支持一下
+ * 实际显示时需要过滤掉第一列
+ */
+function parseInsideBorders(word, element) {
+    var H;
+    var insideH = element.getElementsByTagName('w:insideH').item(0);
+    if (insideH) {
+        H = parseBorder.parseBorder(word, insideH);
+    }
+    var V;
+    var insideV = element.getElementsByTagName('w:insideV').item(0);
+    if (insideV) {
+        V = parseBorder.parseBorder(word, insideV);
+    }
+    return {
+        H: H,
+        V: V
+    };
+}
+
+exports.parseInsideBorders = parseInsideBorders;

package/lib/parse/parsePr.d.ts

@@ -1,3 +1,6 @@
+/**
+ * 包括 rPr 及 pPr 的解析，参考了 docxjs 里的实现
+ */
 import { CSSStyle } from '../openxml/Style';
 import Word from '../Word';
 /**

package/lib/parse/parsePr.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
-var Types = require('../openxml/Types.js');
+var tslib = require('tslib');
 var parseSize = require('./parseSize.js');
 var OpenXML = require('../OpenXML.js');
 var parseBorder = require('./parseBorder.js');
 var parseColor = require('./parseColor.js');
+var parseChildColor = require('./parseChildColor.js');
 var parseInd = require('./parseInd.js');
 var parseSpacing = require('./parseSpacing.js');
 var parseFont = require('./parseFont.js');
@@ -15,6 +15,9 @@ var parseTrHeight = require('./parseTrHeight.js');
 var jcToTextAlign = require('./jcToTextAlign.js');
 var parseTextDirection = require('./parseTextDirection.js');
 
+/**
+ * 包括 rPr 及 pPr 的解析，参考了 docxjs 里的实现
+ */
 /**
  * 解析 underline 并附上样式
  * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/u.html
@@ -69,13 +72,14 @@ function parseUnderline(word, element, style) {
 function parseFrame(element, style) {
     var e_1, _a;
     try {
-        for (var _b = tslib_es6.__values(element.attributes), _c = _b.next(); !_c.done; _c = _b.next()) {
+        for (var _b = tslib.__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') {
+                        // initial-letter 很少浏览器支持，所以用 float 代替
                         style['float'] = 'left';
                     }
                     break;
@@ -89,6 +93,17 @@ function parseFrame(element, style) {
                         style['width'] = parseSize.parseSize(value, 'w:w');
                     }
                     break;
+                case 'w:hAnchor':
+                case 'w:vAnchor':
+                case 'w:lines':
+                    // 目前没有办法做到这些属性的控制
+                    break;
+                case 'w:wrap':
+                    // 其它不支持，先报错
+                    if (value !== 'around') {
+                        console.warn('parseFrame: w:wrap not support ' + value);
+                    }
+                    break;
                 default:
                     console.warn('parseFrame: unknown attribute ' + name_1, attribute);
             }
@@ -102,7 +117,30 @@ function parseFrame(element, style) {
         finally { if (e_1) throw e_1.error; }
     }
 }
-var HighLightColor = 'transparent';
+/**
+ * 将 em 转成 css 里对应的 text-emphasis 值
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/ST_Em.html
+ */
+function convertEm(em, style) {
+    switch (em) {
+        case 'dot':
+            style['text-emphasis'] = 'filled';
+            // 按规范里描述应该是在文字上面，但在 word 实际显示的时候是在下面
+            // 怀疑是中文场景下做了特殊处理
+            style['text-emphasis-position'] = 'under right';
+            break;
+        case 'comma':
+            style['text-emphasis'] = 'filled sesame';
+            break;
+        case 'circle':
+            style['text-emphasis'] = 'open';
+            break;
+        case 'underDot':
+            style['text-emphasis'] = 'filled';
+            style['text-emphasis-position'] = 'under right';
+            break;
+    }
+}
 /**
  * 解析各种 pPr 及 rPr，返回样式
  * @param type 所属类型
@@ -112,7 +150,7 @@ function parsePr(word, element, type) {
     var e_2, _a;
     var style = {};
     try {
-        for (var _b = tslib_es6.__values(element.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+        for (var _b = tslib.__values(element.children), _c = _b.next(); !_c.done; _c = _b.next()) {
             var child = _c.value;
             var tagName = child.tagName;
             switch (tagName) {
@@ -148,16 +186,16 @@ function parsePr(word, element, type) {
                 case 'w:highlight':
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/highlight.html
                     // 这个按文档是重要性高于 shd
-                    style['background-color'] = parseColor.parseColorAttr(word, child, 'w:fill', HighLightColor);
+                    style['background-color'] = parseColor.parseColorAttr(word, child, 'w:val', 'yellow');
                     break;
                 case 'w:vertAlign':
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/vertAlign.html
                     // 这个其实和 position 有冲突，但预计这两个同时出现的概率不高
                     var vertAlign = OpenXML.getVal(child);
-                    if (vertAlign === Types.ST_VerticalAlignRun.superscript) {
+                    if (vertAlign === 'superscript') {
                         style['vertical-align'] = 'super';
                     }
-                    else if (vertAlign === Types.ST_VerticalAlignRun.subscript) {
+                    else if (vertAlign === 'subscript') {
                         style['vertical-align'] = 'sub';
                     }
                     break;
@@ -231,7 +269,7 @@ function parsePr(word, element, type) {
                     // );
                     break;
                 case 'w:pStyle':
-                    // 这个需要特殊处理
+                    // 这个在 paragraph 里处理了
                     break;
                 case 'w:lang':
                 case 'w:noProof':
@@ -254,7 +292,14 @@ function parsePr(word, element, type) {
                     // 这个在 parseParagraphProperties 里处理了
                     break;
                 case 'w:rPr':
-                    // TODO: 这个有时候会不正确，需要再看看
+                    // TODO: 这个有时候和 r 里的 rPr 不一致，不知道如何处理
+                    var reflection = child.getElementsByTagName('w14:reflection').item(0);
+                    if (reflection) {
+                        // css 只支持在块级节点设置
+                        // 只支持一小部分设置项，另外因为只支持块级别的情况，所以看起来差异较大
+                        var reflectionDistance = parseSize.parseSize(reflection, 'w4:dist', parseSize.LengthUsage.Emu) || '0px';
+                        style['-webkit-box-reflect'] = "below ".concat(reflectionDistance, " linear-gradient(transparent, white)");
+                    }
                     break;
                 case 'w:rStyle':
                     // 在 Run 里地方处理了
@@ -270,6 +315,9 @@ function parsePr(word, element, type) {
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/snapToGrid_2.html
                     // 目前还不支持 grid
                     break;
+                case 'w:topLinePunct':
+                    // 没法支持
+                    break;
                 case 'w:wordWrap':
                     // 不太确定这里是用 word-break 还是 overflow-wrap
                     if (OpenXML.getValBoolean(child)) {
@@ -279,10 +327,10 @@ function parsePr(word, element, type) {
                 case 'w:textAlignment':
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/textAlignment.html
                     var alignment = OpenXML.getVal(child);
-                    if (alignment === Types.ST_TextAlignment.center) {
+                    if (alignment === 'center') {
                         style['vertical-align'] = 'middle';
                     }
-                    else if (alignment !== Types.ST_TextAlignment.auto) {
+                    else if (alignment !== 'auto') {
                         style['vertical-align'] = alignment;
                     }
                     break;
@@ -311,6 +359,55 @@ function parsePr(word, element, type) {
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/overflowPunct.html
                     // 支持不了
                     break;
+                case 'w:em':
+                    convertEm(OpenXML.getVal(child), style);
+                    break;
+                case 'w:w':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/w_1.html
+                    // 看起来应该是把文字拉伸
+                    var w = OpenXML.getValNumber(child);
+                    style['transform'] = "scaleX(".concat(w / 100, ")");
+                    style['display'] = 'inline-block'; // 需要这样才能生效
+                    break;
+                case 'w:outline':
+                    style['text-shadow'] =
+                        '-1px -1px 0 #AAA, 1px -1px 0 #AAA, -1px 1px 0 #AAA, 1px 1px 0 #AAA';
+                    break;
+                case 'w:shadown':
+                case 'w:imprint':
+                    if (OpenXML.getValBoolean(child, true)) {
+                        style['text-shadow'] = '1px 1px 2px rgba(0, 0, 0, 0.6)';
+                    }
+                    break;
+                case 'w14:shadow':
+                    var blurRad = parseSize.parseSize(child, 'w14:blurRad', parseSize.LengthUsage.Emu) || '4px';
+                    // 其它结果算出来不像就先忽略了
+                    var color = 'rgba(0, 0, 0, 0.6)';
+                    var childColor = parseChildColor.parseChildColor(word, child);
+                    if (childColor) {
+                        color = childColor;
+                    }
+                    style['text-shadow'] = "1px 1px ".concat(blurRad, " ").concat(color);
+                    break;
+                case 'w14:textOutline':
+                    var outlineWidth = parseSize.parseSize(child, 'w14:w', parseSize.LengthUsage.Emu) || '1px';
+                    style['-webkit-text-stroke-width'] = outlineWidth;
+                    var outlineColor = 'white';
+                    var fillColor = child.getElementsByTagName('w14:solidFill');
+                    if (fillColor.length > 0) {
+                        outlineColor = parseChildColor.parseChildColor(word, fillColor.item(0)) || 'white';
+                    }
+                    style['-webkit-text-stroke-color'] = outlineColor;
+                    break;
+                case 'w14:reflection':
+                    // 在 rPr 里处理了
+                    break;
+                case 'w14:textFill':
+                    // color 已经够用了，为了避免 lumMod 计算不正确反而导致问题，所以就不支持了
+                    break;
+                case 'w14:ligatures':
+                    // 没文档，不知道
+                    break;
                 default:
                     console.warn('parsePr Unknown tagName', tagName, child);
             }

package/lib/parse/parseRelationship.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 
 /**
  * 解析 _rels/.rels 文件
@@ -25,7 +25,7 @@ function parseRelationships(element, part) {
     var relationships = {};
     var relationshipElements = element.getElementsByTagName('Relationship');
     try {
-        for (var relationshipElements_1 = tslib_es6.__values(relationshipElements), relationshipElements_1_1 = relationshipElements_1.next(); !relationshipElements_1_1.done; relationshipElements_1_1 = relationshipElements_1.next()) {
+        for (var relationshipElements_1 = tslib.__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;

package/lib/parse/parseSdt.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 17.5.2 Structured Document Tags
+ * 目前 sdt 的做法就是直接忽略，将它的 stdContent 子节点融入上级节点
+ */
+export declare function parseSdt(element: Element, arr: Element[], index: number): void;

package/lib/parse/parseShape.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 解析 shape
+ */
+import { Path, PathPoint } from '../openxml/drawing/Path';
+import { Shape, ShapeGuide } from '../openxml/drawing/Shape';
+export declare function parsePts(element: Element): PathPoint[];
+export declare function parsePath(element: Element): Path;
+export declare function parsePathLst(element: Element): Path[];
+export declare function parseShapeGuide(element: Element): ShapeGuide[];
+export declare function parseShape(element: Element): Shape;