office-viewer 0.1.0

package/esm/util/autoSpace.js

@@ -0,0 +1,33 @@
+/**
+ * 中英文间自动加空格，基于下面代码改的，去掉了 lodash 依赖
+ * https://gist.github.com/wyl8899/e0f31068681023480e20c34f6b19a275
+ */
+/* Partial implementation from https://zhuanlan.zhihu.com/p/33612593 */
+/* 标点 */
+var punctuationRegex = /\p{Punctuation}/u;
+/* 空格 */
+var spaceRegex = /\p{Separator}/u;
+/* CJK 字符，中日韩 */
+var cjkRegex = /\p{Script=Han}|\p{Script=Katakana}|\p{Script=Hiragana}|\p{Script=Hangul}/u;
+var shouldSpace = function (a, b) {
+    if (cjkRegex.test(a)) {
+        return !(punctuationRegex.test(b) ||
+            spaceRegex.test(b) ||
+            cjkRegex.test(b));
+    }
+    else {
+        return cjkRegex.test(b) && !punctuationRegex.test(a) && !spaceRegex.test(a);
+    }
+};
+var join = function (parts, sepFunc) {
+    return parts.reduce(function (r, p, i) {
+        var sep = i !== 0 ? sepFunc(p, parts[i - 1]) : '';
+        return r + sep + p;
+    }, '');
+};
+var cjkspace = function (strings) {
+    var filtered = strings.filter(function (c) { return c !== undefined && c !== ''; });
+    return join(filtered, function (a, b) { return (shouldSpace(a, b) ? ' ' : ''); });
+};
+
+export { cjkspace };

package/esm/util/blob.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 将 blob 转成 data url
+ */
+export declare function blobToDataURL(blob: Blob): Promise<string>;
+/**
+ * 下载 blob
+ * https://dev.to/nombrekeff/download-file-from-blob-21ho
+ */
+export declare function downloadBlob(blob: Blob, name?: string): void;

package/esm/util/blob.js

@@ -0,0 +1,39 @@
+/**
+ * 将 blob 转成 data url
+ */
+function blobToDataURL(blob) {
+    return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.onload = function (_e) { return resolve(reader.result); };
+        reader.onerror = function (_e) { return reject(reader.error); };
+        reader.onabort = function (_e) { return reject(new Error('Read aborted')); };
+        reader.readAsDataURL(blob);
+    });
+}
+/**
+ * 下载 blob
+ * https://dev.to/nombrekeff/download-file-from-blob-21ho
+ */
+function downloadBlob(blob, name) {
+    if (name === void 0) { name = 'file.txt'; }
+    // Convert your blob into a Blob URL (a special url that points to an object in the browser's memory)
+    var blobUrl = URL.createObjectURL(blob);
+    // Create a link element
+    var link = document.createElement('a');
+    // Set link's href to point to the Blob URL
+    link.href = blobUrl;
+    link.download = name;
+    // Append link to the body
+    document.body.appendChild(link);
+    // Dispatch click event on the link
+    // This is necessary as link.click() does not work on the latest firefox
+    link.dispatchEvent(new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window
+    }));
+    // Remove link from body
+    document.body.removeChild(link);
+}
+
+export { blobToDataURL, downloadBlob };

package/esm/util/dom.d.ts

@@ -0,0 +1,36 @@
+/**
+ * dom 相关的操作
+ */
+import { CSSStyle } from '../openxml/Style';
+/**
+ * 样式对象转成 css 文本
+ */
+export declare function styleToText(style?: CSSStyle): string;
+/**
+ * 设置元素样式
+ */
+export declare function setStyle(el: HTMLElement, style: CSSStyle): void;
+/**
+ * 创建元素
+ */
+export declare function createElement(tagName: string): HTMLElement;
+/**
+ * 创建片段
+ */
+export declare function createDocumentFragment(): DocumentFragment;
+/**
+ * 添加子节点，会做一些判断避免报错
+ */
+export declare function appendChild(parent: HTMLElement, child: HTMLElement | null): void;
+/**
+ * 添加注释节点
+ */
+export declare function appendComment(parent: HTMLElement, comment: string): void;
+/**
+ * 添加 css 类
+ */
+export declare function addClassName(el: HTMLElement, className: string): void;
+/**
+ * 批量添加 css 类
+ */
+export declare function addClassNames(el: HTMLElement, classNames: string[]): void;

package/esm/util/dom.js

@@ -0,0 +1,63 @@
+import { __spreadArray, __read } from '../node_modules/tslib/tslib.es6.js';
+
+/**
+ * dom 相关的操作
+ */
+/**
+ * 样式对象转成 css 文本
+ */
+function styleToText(style) {
+    if (style === void 0) { style = {}; }
+    var text = '';
+    for (var key in style) {
+        var value = style[key];
+        if (value != null && value !== '') {
+            text += "".concat(key, ": ").concat(value, ";\n");
+        }
+    }
+    return text;
+}
+/**
+ * 设置元素样式
+ */
+function setStyle(el, style) {
+    for (var key in style) {
+        var value = style[key];
+        if (value != null && value !== '') {
+            el.style.setProperty(key, style[key]);
+        }
+    }
+}
+/**
+ * 创建元素
+ */
+function createElement(tagName) {
+    return document.createElement(tagName);
+}
+/**
+ * 添加子节点，会做一些判断避免报错
+ */
+function appendChild(parent, child) {
+    if (parent && child) {
+        parent.appendChild(child);
+    }
+}
+/**
+ * 添加 css 类
+ */
+function addClassName(el, className) {
+    if (el && className) {
+        el.classList.add(className);
+    }
+}
+/**
+ * 批量添加 css 类
+ */
+function addClassNames(el, classNames) {
+    var _a;
+    if (el && classNames) {
+        (_a = el.classList).add.apply(_a, __spreadArray([], __read(classNames), false));
+    }
+}
+
+export { addClassName, addClassNames, appendChild, createElement, setStyle, styleToText };

package/esm/util/mergeRun.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 合并 p 下相同的文本，主要是为了方便替换变量
+ */
+import Word from '../Word';
+/**
+ * 只支持处理 w:r 下有 w:t 的情况
+ */
+export declare function canMerge(element: Element): boolean;
+/**
+ * 合并 p 下相同的文本
+ */
+export declare function mergeRunInP(word: Word, p: Element): void;
+/**
+ * 合并
+ * @param document
+ */
+export declare function mergeRun(word: Word, doc: Document): void;

package/esm/util/mergeRun.js

@@ -0,0 +1,134 @@
+import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { parsePr } from '../parse/parsePr.js';
+
+/**
+ * 合并 p 下相同的文本，主要是为了方便替换变量
+ */
+/**
+ *  是否具有相同样式
+ */
+function hasSomeStyle(word, first, second) {
+    var firstStyle = first ? parsePr(word, first) : {};
+    var secondStyle = second ? parsePr(word, second) : {};
+    return JSON.stringify(firstStyle) === JSON.stringify(secondStyle);
+}
+function mergeText(first, second) {
+    var firstT = first.getElementsByTagName('w:t')[0];
+    var secondT = second.getElementsByTagName('w:t')[0];
+    if (firstT && secondT) {
+        var secondText = secondT.textContent || '';
+        firstT.textContent += secondText || '';
+    }
+}
+/**
+ * 只支持处理 w:r 下有 w:t 的情况
+ */
+function canMerge(element) {
+    var e_1, _a;
+    var tagName = element.tagName;
+    var childChildren = element.children;
+    var hasText = false;
+    var textHasSpace = false;
+    try {
+        for (var childChildren_1 = __values(childChildren), childChildren_1_1 = childChildren_1.next(); !childChildren_1_1.done; childChildren_1_1 = childChildren_1.next()) {
+            var childChild = childChildren_1_1.value;
+            if (childChild.tagName === 'w:t') {
+                hasText = true;
+                textHasSpace = childChild.getAttribute('xml:space') === 'preserve';
+                break;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (childChildren_1_1 && !childChildren_1_1.done && (_a = childChildren_1.return)) _a.call(childChildren_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return tagName === 'w:r' && hasText && !textHasSpace;
+}
+/**
+ * 合并 p 下相同的文本
+ */
+function mergeRunInP(word, p) {
+    var e_2, _a, e_3, _b;
+    var newElements = [];
+    var lastRun = null;
+    try {
+        for (var _c = __values(p.children), _d = _c.next(); !_d.done; _d = _c.next()) {
+            var child = _d.value;
+            var tagName = child.tagName;
+            // 避免图片和空格被合并了
+            if (canMerge(child)) {
+                if (lastRun) {
+                    var lastRunProps = lastRun.getElementsByTagName('w:rPr')[0];
+                    var thisProps = child.getElementsByTagName('w:rPr')[0];
+                    if (hasSomeStyle(word, lastRunProps, thisProps)) {
+                        mergeText(lastRun, child);
+                    }
+                    else {
+                        lastRun = child;
+                        newElements.push(child);
+                    }
+                }
+                else {
+                    // 说明是第一次运行
+                    lastRun = child;
+                    newElements.push(child);
+                }
+            }
+            else {
+                // 忽略这个标签
+                if (tagName !== 'w:proofErr') {
+                    lastRun = null;
+                    newElements.push(child);
+                }
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    p.innerHTML = '';
+    try {
+        for (var newElements_1 = __values(newElements), newElements_1_1 = newElements_1.next(); !newElements_1_1.done; newElements_1_1 = newElements_1.next()) {
+            var newElement = newElements_1_1.value;
+            p.appendChild(newElement);
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (newElements_1_1 && !newElements_1_1.done && (_b = newElements_1.return)) _b.call(newElements_1);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+}
+/**
+ * 合并
+ * @param document
+ */
+function mergeRun(word, doc) {
+    var e_4, _a;
+    var ps = doc.getElementsByTagName('w:p');
+    try {
+        for (var ps_1 = __values(ps), ps_1_1 = ps_1.next(); !ps_1_1.done; ps_1_1 = ps_1.next()) {
+            var p = ps_1_1.value;
+            mergeRunInP(word, p);
+        }
+    }
+    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+    finally {
+        try {
+            if (ps_1_1 && !ps_1_1.done && (_a = ps_1.return)) _a.call(ps_1);
+        }
+        finally { if (e_4) throw e_4.error; }
+    }
+}
+
+export { canMerge, mergeRun, mergeRunInP };

package/esm/util/xml.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 解析 xml
+ */
+export declare function parseXML(content: string): Document;
+/**
+ * 构建 xml 文本
+ */
+export declare function buildXML(doc: Node): string;

package/esm/util/xml.js

@@ -0,0 +1,12 @@
+/**
+ * 解析 xml
+ */
+/**
+ * 构建 xml 文本
+ */
+function buildXML(doc) {
+    var serializer = new XMLSerializer();
+    return serializer.serializeToString(doc);
+}
+
+export { buildXML };

package/lib/OpenXML.d.ts

@@ -0,0 +1,21 @@
+/**
+ * openxml 一些辅助函数
+ */
+/**
+ * 获取 w:val 的值
+ */
+export declare function getVal(element: Element): string;
+/**
+ * 获取 w:val 的值，转成 number 类型
+ */
+export declare function getValNumber(element: Element): number;
+/**
+ * 有可能是 on 或 off 之类的值，都归一化为 boolean
+ * @param value
+ * @param defaultValue 默认值
+ * @returns
+ */
+export declare function normalizeBoolean(value: string | boolean | null, defaultValue?: boolean): boolean;
+export declare function getValBoolean(element: Element, defaultValue?: boolean): boolean;
+export declare function getAttrBoolean(element: Element, attr: string, defaultValue?: boolean): boolean;
+export declare function getValHex(element: Element): number;

package/lib/OpenXML.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * openxml 一些辅助函数
+ */
+/**
+ * 获取 w:val 的值
+ */
+function getVal(element) {
+    return element.getAttribute('w:val') || '';
+}
+/**
+ * 获取 w:val 的值，转成 number 类型
+ */
+function getValNumber(element) {
+    return parseInt(getVal(element), 10);
+}
+/**
+ * 有可能是 on 或 off 之类的值，都归一化为 boolean
+ * @param value
+ * @param defaultValue 默认值
+ * @returns
+ */
+function normalizeBoolean(value, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = false; }
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    if (typeof value === 'string') {
+        switch (value) {
+            case '1':
+                return true;
+            case '0':
+                return false;
+            case 'on':
+                return true;
+            case 'off':
+                return false;
+            case 'true':
+                return true;
+            case 'false':
+                return false;
+        }
+        if (typeof value === 'number') {
+            return value !== 0;
+        }
+    }
+    return defaultValue;
+}
+function getValBoolean(element, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = true; }
+    return normalizeBoolean(getVal(element), defaultValue);
+}
+function getAttrBoolean(element, attr, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = true; }
+    return normalizeBoolean(element.getAttribute(attr), defaultValue);
+}
+function getValHex(element) {
+    return parseInt(getVal(element) || '0', 16);
+}
+
+exports.getAttrBoolean = getAttrBoolean;
+exports.getVal = getVal;
+exports.getValBoolean = getValBoolean;
+exports.getValHex = getValHex;
+exports.getValNumber = getValNumber;
+exports.normalizeBoolean = normalizeBoolean;

package/lib/Word.d.ts

@@ -0,0 +1,208 @@
+/**
+ * 总入口，它将包括所有 word 文档信息，后续渲染的时候依赖它来获取关联信息
+ */
+import { Relationship } from './parse/parseRelationship';
+import { ContentTypes } from './openxml/ContentType';
+import { Styles } from './openxml/Style';
+import { Theme } from './openxml/Theme';
+import { Numbering } from './openxml/word/numbering/Numbering';
+import { PackageParser } from './package/PackageParser';
+import { Paragraph } from './openxml/word/Paragraph';
+/**
+ * 渲染配置
+ */
+export interface WordRenderOptions {
+    /**
+     * css 类前缀
+     */
+    classPrefix: string;
+    /** 图片是否使用 data url */
+    imageDataURL: boolean;
+    /**
+     * 列表使用字体渲染，需要自行引入 Windings 字体
+     */
+    bulletUseFont: boolean;
+    /**
+     * 是否包裹出页面效果
+     */
+    inWrap: boolean;
+    /**
+     * 是否忽略文档宽度设置
+     */
+    ignoreWidth?: boolean;
+    /**
+     * 是否忽略文档高度设置
+     */
+    ignoreHeight?: boolean;
+    /**
+     * 强制文档内边距设置
+     */
+    padding?: string;
+    /**
+     * 最小行高
+     */
+    minLineHeight?: number;
+    /**
+     * 是否开启变量替换功能
+     */
+    enableVar?: boolean;
+    /**
+     * 进行模板替换的函数
+     */
+    replaceText?: (text: string) => string;
+    /**
+     * 是否开启调试模式
+     */
+    debug?: boolean;
+    /**
+     * 字体映射，用于替换文档中的字体
+     */
+    fontMapping?: Record<string, string>;
+    /**
+     * 强制行高，设置之后所有文本都使用这个行高，可以优化排版效果
+     */
+    forceLineHeight?: string;
+}
+export default class Word {
+    /**
+     * 全局 id，用于一个页面渲染多个 word 文档
+     */
+    static globalId: number;
+    /**
+     * 当前渲染 id
+     */
+    id: number;
+    /**
+     * openxml 包
+     */
+    parser: PackageParser;
+    /**
+     * 解析 [Content_Types].xml 里的数据
+     */
+    conentTypes: ContentTypes;
+    /**
+     * 解析 theme 目录里的数据
+     */
+    themes: Theme[];
+    /**
+     * 解析 numbering.xml 里的数据
+     */
+    numbering: Numbering;
+    /**
+     * 解析 styles.xml 里的数据
+     */
+    styles: Styles;
+    renderOptions: WordRenderOptions;
+    relationships: Record<string, Relationship>;
+    /**
+     * 样式名映射，因为自定义样式名有可能不符合 css 命名规范，因此实际使用这个名字
+     */
+    styleIdMap: Record<string, string>;
+    /**
+     * 用于自动生成样式名时的计数，保证每次都是唯一的
+     */
+    styleIdNum: number;
+    /**
+     * 渲染根节点
+     */
+    rootElement: HTMLElement;
+    wrapClassName: string;
+    /**
+     * 当前渲染的段落，主要用于获取 fldSimple
+     */
+    currentParagraph: Paragraph;
+    /**
+     * 构建 word
+     *
+     * @param docxFile docx 文件
+     * @param options 渲染配置
+     * @param packaParser 包解析器
+     */
+    constructor(docFile: ArrayBuffer | string, renderOptions?: Partial<WordRenderOptions>, parser?: PackageParser);
+    inited: boolean;
+    /**
+     * 初始化一些公共资源，比如
+     */
+    init(): void;
+    /**
+     * 解析全局主题配置
+     */
+    initTheme(): void;
+    /**
+     * 解析全局样式
+     */
+    initStyle(): void;
+    /**
+     * 解析关系
+     */
+    initRelation(): void;
+    /**
+     * 解析全局配置
+     */
+    initContentType(): void;
+    /**
+     * 解析 numbering
+     */
+    initNumbering(): void;
+    /**
+     * 根据 id 获取关系
+     */
+    getRelationship(id?: string): Relationship | null;
+    /**
+     * 进行文本替换
+     */
+    replaceText(text: string): string;
+    /**
+     * 加载图片
+     */
+    loadImage(relation: Relationship): Promise<string> | null;
+    /**
+     * 解析 html
+     */
+    getXML(filePath: string): Document;
+    /**
+     * 获取 styleId 的显示名称，因为这里可以自定义，理论上会出现 css 不支持的语法
+     */
+    getStyleIdDisplayName(styleId: string): string;
+    /**
+     * 生成个新的唯一的 class 名称
+     */
+    genClassName(): string;
+    /**
+     * 添加新样式，主要用于表格的单元格样式
+     */
+    appendStyle(style: string): void;
+    /**
+     * 返回样式表名及它的父级样式表名
+     * @param styleId 样式表里的 style 名称
+     * @returns 返回 className 数组
+     */
+    getStyleClassName(stylId: string): string[];
+    /**
+     * 渲染时的 css 类前缀
+     */
+    getClassPrefix(): string;
+    /**
+     * 获取主题色，目前基于 css 变量实现，方便动态修改
+     */
+    getThemeColor(name: string): string;
+    addClass(element: HTMLElement, className: string): void;
+    /**
+     * 更新页面中的变量，这个要在 render 后运行
+     */
+    updateVariable(): void;
+    /**
+     * 下载生成的文档，会对 word/document.xml 进行处理，替换文本
+     */
+    download(fileName?: string): void;
+    /**
+     * 打印功能
+     */
+    print(): Promise<void>;
+    /**
+     * 渲染文档入口
+     *
+     * @param root 渲染的根节点
+     */
+    render(root: HTMLElement): Promise<void>;
+}