office-viewer 0.1.0

package/esm/package/ZipPackageParser.js

@@ -0,0 +1,70 @@
+import { unzipSync, strFromU8, strToU8, zipSync } from 'fflate';
+
+/**
+ * zip 文件解析
+ */
+var ZipPackageParser = /** @class */ (function () {
+    function ZipPackageParser() {
+    }
+    /**
+     * 加载 zip 文件
+     */
+    ZipPackageParser.prototype.load = function (docxFile) {
+        this.zip = unzipSync(new Uint8Array(docxFile), {
+            filter: function (file) {
+                // 不解析大于 10 MiB 的文件
+                return file.originalSize <= 10000000;
+            }
+        });
+    };
+    /**
+     * 读取 xml 文件，转成 json 对象
+     * @param filePath 文件路径
+     * @returns 转成 json 的结果
+     */
+    ZipPackageParser.prototype.getXML = function (filePath) {
+        var fileContent = this.getFileByType(filePath, 'string');
+        var doc = new DOMParser().parseFromString(fileContent, 'application/xml');
+        var errorNode = doc.querySelector('parsererror');
+        if (errorNode) {
+            throw new Error(errorNode.textContent || "can't parse xml");
+        }
+        else {
+            return doc;
+        }
+    };
+    /**
+     * 根据类型读取文件
+     */
+    ZipPackageParser.prototype.getFileByType = function (filePath, type) {
+        filePath = filePath.startsWith('/') ? filePath.slice(1) : filePath;
+        var file = this.zip[filePath];
+        if (file) {
+            if (type === 'string') {
+                return strFromU8(file);
+            }
+            else if (type === 'blob') {
+                return new Blob([file]);
+            }
+        }
+        throw new Error('file not found');
+    };
+    /**
+     * 判断文件是否存在
+     */
+    ZipPackageParser.prototype.fileExists = function (filePath) {
+        filePath = filePath.startsWith('/') ? filePath.slice(1) : filePath;
+        return filePath in this.zip;
+    };
+    /**
+     * 生成新的 zip 文件
+     */
+    ZipPackageParser.prototype.generateZip = function (docContent) {
+        // 其实最好是生成个新的，后续再优化
+        this.zip['word/document.xml'] = strToU8(docContent);
+        return new Blob([zipSync(this.zip)]);
+    };
+    return ZipPackageParser;
+}());
+
+export { ZipPackageParser as default };

package/esm/parse/jcToTextAlign.d.ts

@@ -0,0 +1,5 @@
+/** 将 jc 转成 text-align
+ *
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/ST_Jc.html
+ */
+export declare function jcToTextAlign(jc: string): string;

package/esm/parse/jcToTextAlign.js

@@ -0,0 +1,21 @@
+/** 将 jc 转成 text-align
+ *
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/ST_Jc.html
+ */
+function jcToTextAlign(jc) {
+    switch (jc) {
+        case 'start':
+        case 'left':
+            return 'left';
+        case 'center':
+            return 'center';
+        case 'end':
+        case 'right':
+            return 'right';
+        case 'both':
+            return 'justify';
+    }
+    return jc;
+}
+
+export { jcToTextAlign };

package/esm/parse/parseBorder.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 解析边框转成 css 样式 http://officeopenxml.com/WPborders.php
+ */
+import { CSSStyle } from '../openxml/Style';
+import Word from '../Word';
+/**
+ * 解析单个边框样式
+ */
+export declare function parseBorder(word: Word, element: Element): string;
+/**
+ * 解析边框
+ */
+export declare function parseBorders(word: Word, element: Element, style: CSSStyle): void;

package/esm/parse/parseBorder.js

@@ -0,0 +1,78 @@
+import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { getVal } from '../OpenXML.js';
+import { parseColorAttr } from './parseColor.js';
+import { parseSize, LengthUsage } from './parseSize.js';
+import { ST_Border } from '../openxml/Types.js';
+
+// 默认边框颜色
+var DEFAULT_BORDER_COLOR = 'black';
+/**
+ * 解析单个边框样式
+ */
+function parseBorder(word, element) {
+    var type = getVal(element);
+    if (type === ST_Border.nil || type === ST_Border.none) {
+        return 'none';
+    }
+    // 这里和 css 不完全一致，css 能表现的要少很多，也是导致展现效果难以一致的原因
+    switch (type) {
+        case ST_Border.dashed:
+        case ST_Border.dashDotStroked:
+        case ST_Border.dashSmallGap:
+            break;
+        case ST_Border.dotDash:
+        case ST_Border.dotDotDash:
+        case ST_Border.dotted:
+            break;
+        case ST_Border.double:
+        case ST_Border.doubleWave:
+            break;
+        case ST_Border.inset:
+            break;
+        case ST_Border.outset:
+            break;
+    }
+    var color = parseColorAttr(word, element);
+    var size = parseSize(element, 'w:sz', LengthUsage.Border);
+    return "".concat(size, " solid ").concat(color == 'auto' ? DEFAULT_BORDER_COLOR : color);
+}
+/**
+ * 解析边框
+ */
+function parseBorders(word, element, style) {
+    var e_1, _a;
+    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:start':
+                case 'w:left':
+                    style['border-left'] = parseBorder(word, child);
+                    break;
+                case 'w:end':
+                case 'w:right':
+                    style['border-right'] = parseBorder(word, child);
+                    break;
+                case 'w:top':
+                    style['border-top'] = parseBorder(word, child);
+                    break;
+                case 'w:bottom':
+                    style['border-bottom'] = parseBorder(word, child);
+                    break;
+                // TODO: 还有个 between 不知道是干啥的
+                default:
+                    break;
+            }
+        }
+    }
+    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 { parseBorder, parseBorders };

package/esm/parse/parseColor.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 解析颜色，转成 css 的颜色
+ */
+import Word from '../Word';
+/**
+ *
+ * 解析属性上的 color，比如  <w:top w:val="single" w:sz="24" w:space="1" w:color="FF0000" />
+ * @param attrName color 默认属性
+ * @param autoColor 默认值
+ * @returns css 颜色
+ */
+export declare function parseColorAttr(word: Word, element: Element, attrName?: string, autoColor?: string): string;
+/**
+ * 专门用来支持 shd 的颜色
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/ST_Shd.html
+ */
+export declare function parseShdColor(word: Word, element: Element): string;
+/**
+ * 解析 color 标签，比如 <w:color w:themeColor="accent3" />
+ * @returns css 颜色
+ */
+export declare function parseColor(word: Word, element: Element): string;

package/esm/parse/parseColor.js

@@ -0,0 +1,131 @@
+import { getVal } from '../OpenXML.js';
+import { ST_Shd } from '../openxml/Types.js';
+
+/**
+ * 解析颜色，转成 css 的颜色
+ */
+var knownColors = [
+    'black',
+    'blue',
+    'cyan',
+    'darkBlue',
+    'darkCyan',
+    'darkGray',
+    'darkGreen',
+    'darkMagenta',
+    'darkRed',
+    'darkYellow',
+    'green',
+    'lightGray',
+    'magenta',
+    'none',
+    'red',
+    'white',
+    'yellow'
+];
+/**
+ *
+ * 解析属性上的 color，比如  <w:top w:val="single" w:sz="24" w:space="1" w:color="FF0000" />
+ * @param attrName color 默认属性
+ * @param autoColor 默认值
+ * @returns css 颜色
+ */
+function parseColorAttr(word, element, attrName, autoColor) {
+    if (attrName === void 0) { attrName = 'w:color'; }
+    if (autoColor === void 0) { autoColor = 'black'; }
+    var color = element.getAttribute(attrName);
+    if (color) {
+        if (color == 'auto') {
+            return autoColor;
+        }
+        else if (typeof color === 'string' && knownColors.includes(color)) {
+            return color;
+        }
+        return "#".concat(color);
+    }
+    var themeColor = element.getAttribute('w:themeColor');
+    return themeColor ? word.getThemeColor(themeColor) : '';
+}
+/**
+ * 专门用来支持 shd 的颜色
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/ST_Shd.html
+ */
+function parseShdColor(word, element) {
+    var color = element.getAttribute('w:fill') || '';
+    var val = getVal(element);
+    if (color === 'auto') {
+        color = 'inherit';
+    }
+    if (color.length === 6) {
+        switch (val) {
+            case ST_Shd.clear:
+                return "#".concat(color);
+            case ST_Shd.pct10:
+                return colorPercent(color, 0.1);
+            case ST_Shd.pct12:
+                return colorPercent(color, 0.125);
+            case ST_Shd.pct15:
+                return colorPercent(color, 0.15);
+            case ST_Shd.pct20:
+                return colorPercent(color, 0.2);
+            case ST_Shd.pct25:
+                return colorPercent(color, 0.25);
+            case ST_Shd.pct30:
+                return colorPercent(color, 0.3);
+            case ST_Shd.pct35:
+                return colorPercent(color, 0.35);
+            case ST_Shd.pct37:
+                return colorPercent(color, 0.375);
+            case ST_Shd.pct40:
+                return colorPercent(color, 0.4);
+            case ST_Shd.pct45:
+                return colorPercent(color, 0.45);
+            case ST_Shd.pct5:
+                return colorPercent(color, 0.05);
+            case ST_Shd.pct50:
+                return colorPercent(color, 0.5);
+            case ST_Shd.pct55:
+                return colorPercent(color, 0.55);
+            case ST_Shd.pct60:
+                return colorPercent(color, 0.6);
+            case ST_Shd.pct65:
+                return colorPercent(color, 0.65);
+            case ST_Shd.pct70:
+                return colorPercent(color, 0.7);
+            case ST_Shd.pct75:
+                return colorPercent(color, 0.75);
+            case ST_Shd.pct80:
+                return colorPercent(color, 0.8);
+            case ST_Shd.pct85:
+                return colorPercent(color, 0.85);
+            case ST_Shd.pct87:
+                return colorPercent(color, 0.87);
+            case ST_Shd.pct90:
+                return colorPercent(color, 0.9);
+            case ST_Shd.pct95:
+                return colorPercent(color, 0.95);
+            default:
+                console.warn('unsupport shd val', val);
+                return "#".concat(color);
+        }
+    }
+    return '';
+}
+/**
+ * 用 alpha 来模拟 ptc 功能
+ */
+function colorPercent(color, percent) {
+    var r = parseInt(color.substring(0, 2), 16);
+    var g = parseInt(color.substring(2, 4), 16);
+    var b = parseInt(color.substring(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(percent, ")");
+}
+/**
+ * 解析 color 标签，比如 <w:color w:themeColor="accent3" />
+ * @returns css 颜色
+ */
+function parseColor(word, element) {
+    return parseColorAttr(word, element, 'w:val');
+}
+
+export { parseColor, parseColorAttr, parseShdColor };

package/esm/parse/parseFont.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 解析字体
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/rFonts.html
+ */
+import { CSSStyle } from '../openxml/Style';
+import Word from '../Word';
+export declare function parseFont(word: Word, element: Element, style: CSSStyle): void;

package/esm/parse/parseFont.js

@@ -0,0 +1,54 @@
+import { __values } from '../node_modules/tslib/tslib.es6.js';
+
+/**
+ * 解析字体
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/rFonts.html
+ */
+function themeFont(font) {
+    return "var(--docx-theme-font-".concat(font, ")");
+}
+function parseFont(word, element, style) {
+    var e_1, _a;
+    var fonts = [];
+    var fontMapping = word.renderOptions.fontMapping;
+    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:ascii':
+                case 'w:cs':
+                case 'w:eastAsia':
+                    if (fontMapping && value in fontMapping) {
+                        value = fontMapping[value];
+                    }
+                    if (value.indexOf(' ') === -1) {
+                        fonts.push(value);
+                    }
+                    else {
+                        fonts.push('"' + value + '"');
+                    }
+                    break;
+                case 'w:asciiTheme':
+                case 'w:csTheme':
+                case 'w:eastAsiaTheme':
+                    fonts.push(themeFont(value));
+                    break;
+            }
+        }
+    }
+    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; }
+    }
+    // hint 之类的不支持，因为也很难控制到这个粒度了
+    if (fonts.length) {
+        style['font-family'] = Array.from(new Set(fonts)).join(', ');
+    }
+}
+
+export { parseFont };

package/esm/parse/parseInd.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 解析缩进 http://officeopenxml.com/WPindentation.php
+ */
+import { CSSStyle } from '../openxml/Style';
+export declare function parseInd(element: Element, style: CSSStyle): void;

package/esm/parse/parseInd.js

@@ -0,0 +1,27 @@
+import { parseSize } from './parseSize.js';
+
+/**
+ * 解析缩进 http://officeopenxml.com/WPindentation.php
+ */
+function parseInd(element, style) {
+    var firstLine = parseSize(element, 'w:firstLine');
+    var hanging = parseSize(element, 'w:hanging');
+    var left = parseSize(element, 'w:left');
+    var start = parseSize(element, 'w:start');
+    var right = parseSize(element, 'w:right');
+    var end = parseSize(element, 'w:end');
+    if (firstLine) {
+        style['text-indent'] = firstLine;
+    }
+    if (hanging) {
+        style['text-indent'] = "-".concat(hanging);
+    }
+    if (left || start) {
+        style['margin-left'] = left || start;
+    }
+    if (right || end) {
+        style['margin-right'] = right || end;
+    }
+}
+
+export { parseInd };

package/esm/parse/parsePr.d.ts

@@ -0,0 +1,8 @@
+import { CSSStyle } from '../openxml/Style';
+import Word from '../Word';
+/**
+ * 解析各种 pPr 及 rPr，返回样式
+ * @param type 所属类型
+ * @returns 样式
+ */
+export declare function parsePr(word: Word, element: Element, type?: 'r' | 'p'): CSSStyle;