office-viewer 0.1.0 → 0.1.4

package/esm/util/replaceVar.js

@@ -0,0 +1,215 @@
+import { __values } from 'tslib';
+import { createObject } from './createObject.js';
+
+/**
+ * 执行变量替换，和普通变量不同，这个支持数组，但因为是提前执行好的，没法再动态生效了
+ * 为了避免 word 里不必要的标签要先执行 mergeRun
+ */
+/**
+ * 替换单个文本变量
+ */
+function replaceT(word, t, data) {
+    var text = t.textContent || '';
+    t.textContent = replaceText(word, text, data);
+}
+/**
+ * 替换变量文本
+ */
+function replaceText(word, text, data) {
+    var evalVar = word.renderOptions.evalVar;
+    if (text.startsWith('{{')) {
+        text = text.replace(/^{{/g, '').replace(/}}$/g, '');
+        var result = evalVar(text, data);
+        if (result !== undefined && result !== null) {
+            return String(result);
+        }
+        else {
+            console.warn('var error: [', text, '] not found in data');
+            return '';
+        }
+    }
+    return text;
+}
+function replaceAlt(word, cNvPr, data) {
+    var alt = cNvPr.getAttribute('descr') || '';
+    cNvPr.setAttribute('descrVar', replaceText(word, alt, data));
+}
+/**
+ * 替换表格行
+ */
+function replaceTableRow(word, tr) {
+    var e_1, _a, e_2, _b, e_3, _c, e_4, _d, e_5, _e;
+    var evalVar = word.renderOptions.evalVar;
+    var data = word.renderOptions.data;
+    var table = tr.parentNode;
+    var tcs = tr.getElementsByTagName('w:tc');
+    var hasLoop = false;
+    var loopArray = [];
+    try {
+        // 查找对应的循环
+        for (var tcs_1 = __values(tcs), tcs_1_1 = tcs_1.next(); !tcs_1_1.done; tcs_1_1 = tcs_1.next()) {
+            var tc = tcs_1_1.value;
+            var ts = tc.getElementsByTagName('w:t');
+            try {
+                for (var ts_1 = (e_2 = void 0, __values(ts)), ts_1_1 = ts_1.next(); !ts_1_1.done; ts_1_1 = ts_1.next()) {
+                    var t = ts_1_1.value;
+                    var text = t.textContent || '';
+                    if (text.startsWith('{{#')) {
+                        var arrayNameMatch = /{{#([^\}]+)}}/;
+                        var arrayMatchResult = arrayNameMatch.exec(text);
+                        if (arrayMatchResult && arrayMatchResult.length > 0) {
+                            hasLoop = true;
+                            var arrayName = arrayMatchResult[1];
+                            var array = evalVar(arrayName, data);
+                            if (Array.isArray(array)) {
+                                loopArray = array;
+                            }
+                            // 去掉这个循环变量
+                            t.textContent = t.textContent.replace("{{#".concat(arrayName, "}}"), '');
+                        }
+                    }
+                    if (text.indexOf('{{/}}')) {
+                        // 去掉结束变量
+                        t.textContent = t.textContent.replace('{{/}}', '');
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (ts_1_1 && !ts_1_1.done && (_b = ts_1.return)) _b.call(ts_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (tcs_1_1 && !tcs_1_1.done && (_a = tcs_1.return)) _a.call(tcs_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    if (hasLoop) {
+        try {
+            // 有循环，复制多行
+            for (var loopArray_1 = __values(loopArray), loopArray_1_1 = loopArray_1.next(); !loopArray_1_1.done; loopArray_1_1 = loopArray_1.next()) {
+                var item = loopArray_1_1.value;
+                var newTr = cloneTr(tr);
+                var ts = newTr.getElementsByTagName('w:t');
+                // 将 item 加入上下文
+                var rowData = createObject(data, item);
+                try {
+                    for (var ts_2 = (e_4 = void 0, __values(ts)), ts_2_1 = ts_2.next(); !ts_2_1.done; ts_2_1 = ts_2.next()) {
+                        var t = ts_2_1.value;
+                        replaceT(word, t, rowData);
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (ts_2_1 && !ts_2_1.done && (_d = ts_2.return)) _d.call(ts_2);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+                try {
+                    // 替换图片里的变量
+                    for (var _f = (e_5 = void 0, __values(newTr.getElementsByTagName('pic:cNvPr'))), _g = _f.next(); !_g.done; _g = _f.next()) {
+                        var cNvPr = _g.value;
+                        replaceAlt(word, cNvPr, rowData);
+                    }
+                }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                finally {
+                    try {
+                        if (_g && !_g.done && (_e = _f.return)) _e.call(_f);
+                    }
+                    finally { if (e_5) throw e_5.error; }
+                }
+                table.insertBefore(newTr, tr);
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (loopArray_1_1 && !loopArray_1_1.done && (_c = loopArray_1.return)) _c.call(loopArray_1);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        // 删除原来的行
+        table.removeChild(tr);
+    }
+}
+/**
+ * 克隆行，并进行一些清理
+ */
+function cloneTr(tr) {
+    var e_6, _a, e_7, _b;
+    var _c;
+    var newTr = tr.cloneNode(true);
+    // 去掉 tr 里的属性，感觉可能会有问题
+    removeAllAttr(newTr);
+    var ps = [].slice.call(newTr.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;
+            removeAllAttr(p);
+        }
+    }
+    catch (e_6_1) { e_6 = { error: e_6_1 }; }
+    finally {
+        try {
+            if (ps_1_1 && !ps_1_1.done && (_a = ps_1.return)) _a.call(ps_1);
+        }
+        finally { if (e_6) throw e_6.error; }
+    }
+    // cnfStyles 基本上都是错的所以删了
+    var cnfStyles = [].slice.call(newTr.getElementsByTagName('w:cnfStyle'));
+    try {
+        for (var cnfStyles_1 = __values(cnfStyles), cnfStyles_1_1 = cnfStyles_1.next(); !cnfStyles_1_1.done; cnfStyles_1_1 = cnfStyles_1.next()) {
+            var cnfStyle = cnfStyles_1_1.value;
+            (_c = cnfStyle.parentElement) === null || _c === void 0 ? void 0 : _c.removeChild(cnfStyle);
+        }
+    }
+    catch (e_7_1) { e_7 = { error: e_7_1 }; }
+    finally {
+        try {
+            if (cnfStyles_1_1 && !cnfStyles_1_1.done && (_b = cnfStyles_1.return)) _b.call(cnfStyles_1);
+        }
+        finally { if (e_7) throw e_7.error; }
+    }
+    return newTr;
+}
+/**
+ * 删掉所有属性，虽然不知道为啥有些不生效
+ */
+function removeAllAttr(node) {
+    while (node.attributes.length > 0) {
+        node.removeAttributeNode(node.attributes[0]);
+    }
+}
+/**
+ * 替换表格，目前只支持行
+ */
+function replaceTable(word, documentData) {
+    var e_8, _a;
+    var trs = [].slice.call(documentData.getElementsByTagName('w:tr'));
+    try {
+        for (var trs_1 = __values(trs), trs_1_1 = trs_1.next(); !trs_1_1.done; trs_1_1 = trs_1.next()) {
+            var tr = trs_1_1.value;
+            replaceTableRow(word, tr);
+        }
+    }
+    catch (e_8_1) { e_8 = { error: e_8_1 }; }
+    finally {
+        try {
+            if (trs_1_1 && !trs_1_1.done && (_a = trs_1.return)) _a.call(trs_1);
+        }
+        finally { if (e_8) throw e_8.error; }
+    }
+}
+function replaceVar(word, documentData) {
+    replaceTable(word, documentData);
+}
+
+export { replaceT, replaceVar };

package/esm/util/xml.js

@@ -1,6 +1,9 @@
 /**
  * 解析 xml
  */
+function parseXML(content) {
+    return new DOMParser().parseFromString(content, 'application/xml');
+}
 /**
  * 构建 xml 文本
  */
@@ -9,4 +12,4 @@ function buildXML(doc) {
     return serializer.serializeToString(doc);
 }
 
-export { buildXML };
+export { buildXML, parseXML };

package/lib/OpenXML.d.ts

@@ -18,4 +18,23 @@ export declare function getValNumber(element: Element): number;
 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;
+/**
+ * 获取属性值，转成数字
+ *
+ * @param attr 属性名
+ * @param defaultValue 默认值
+ * @returns 解析后的数字
+ */
+export declare function getAttrNumber(element: Element, attr: string, defaultValue?: number): number;
+/**
+ * 获取百分比值，没测过
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/DrawingML/ST_Percentage.html
+ * https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_ST_Percentage_topic_ID0EY3XNB.html#topic_ID0EY3XNB
+ *
+ * @returns 0-1 之间的小数
+ */
+export declare function getAttrPercent(element: Element, attr: string): number;
+/**
+ * 获取属性的 hex 值
+ */
 export declare function getValHex(element: Element): number;

package/lib/OpenXML.js

@@ -9,7 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * 获取 w:val 的值
  */
 function getVal(element) {
-    return element.getAttribute('w:val') || '';
+    return (element.getAttribute('w:val') ||
+        element.getAttribute('w14:val') ||
+        element.getAttribute('val') ||
+        '');
 }
 /**
  * 获取 w:val 的值，转成 number 类型
@@ -57,11 +60,51 @@ function getAttrBoolean(element, attr, defaultValue) {
     if (defaultValue === void 0) { defaultValue = true; }
     return normalizeBoolean(element.getAttribute(attr), defaultValue);
 }
+/**
+ * 获取属性值，转成数字
+ *
+ * @param attr 属性名
+ * @param defaultValue 默认值
+ * @returns 解析后的数字
+ */
+function getAttrNumber(element, attr, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = 0; }
+    var value = element.getAttribute(attr);
+    if (value) {
+        return parseInt(value, 10);
+    }
+    else {
+        return defaultValue;
+    }
+}
+/**
+ * 获取百分比值，没测过
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/DrawingML/ST_Percentage.html
+ * https://c-rex.net/projects/samples/ooxml/e1/Part4/OOXML_P4_DOCX_ST_Percentage_topic_ID0EY3XNB.html#topic_ID0EY3XNB
+ *
+ * @returns 0-1 之间的小数
+ */
+function getAttrPercent(element, attr) {
+    var value = element.getAttribute(attr);
+    if (value) {
+        if (value.endsWith('%')) {
+            return parseInt(value, 10) / 100;
+        }
+        var num = parseInt(value, 10);
+        return num / 100000;
+    }
+    return 1;
+}
+/**
+ * 获取属性的 hex 值
+ */
 function getValHex(element) {
     return parseInt(getVal(element) || '0', 16);
 }
 
 exports.getAttrBoolean = getAttrBoolean;
+exports.getAttrNumber = getAttrNumber;
+exports.getAttrPercent = getAttrPercent;
 exports.getVal = getVal;
 exports.getValBoolean = getValBoolean;
 exports.getValHex = getValHex;

package/lib/Word.d.ts

@@ -1,3 +1,4 @@
+import { FontTable } from './openxml/word/FontTable';
 /**
  * 总入口，它将包括所有 word 文档信息，后续渲染的时候依赖它来获取关联信息
  */
@@ -8,6 +9,9 @@ import { Theme } from './openxml/Theme';
 import { Numbering } from './openxml/word/numbering/Numbering';
 import { PackageParser } from './package/PackageParser';
 import { Paragraph } from './openxml/word/Paragraph';
+import { Note } from './openxml/word/Note';
+import { Section } from './openxml/word/Section';
+import { Settings } from './openxml/Settings';
 /**
  * 渲染配置
  */
@@ -16,16 +20,10 @@ export interface WordRenderOptions {
      * css 类前缀
      */
     classPrefix: string;
-    /** 图片是否使用 data url */
-    imageDataURL: boolean;
     /**
      * 列表使用字体渲染，需要自行引入 Windings 字体
      */
     bulletUseFont: boolean;
-    /**
-     * 是否包裹出页面效果
-     */
-    inWrap: boolean;
     /**
      * 是否忽略文档宽度设置
      */
@@ -47,9 +45,13 @@ export interface WordRenderOptions {
      */
     enableVar?: boolean;
     /**
-     * 进行模板替换的函数
+     * 上下文数据，用于替换变量
+     */
+    data?: any;
+    /**
+     * 进行表达式计算的函数，第一个参数是文本变量，第二个参数是上下文数据
      */
-    replaceText?: (text: string) => string;
+    evalVar: (text: string, data?: Object) => Object | string | number | boolean | null | undefined;
     /**
      * 是否开启调试模式
      */
@@ -62,6 +64,59 @@ export interface WordRenderOptions {
      * 强制行高，设置之后所有文本都使用这个行高，可以优化排版效果
      */
     forceLineHeight?: string;
+    /**
+     * 打印等待时间，单位毫秒，可能有的文档有很多图片，如果等待时间太短图片还没加载完，所以加这个配置项可控
+     */
+    printWaitTime?: number;
+    /**
+     * 是否使用分页的方式来渲染内容，使用这种方式还原度更高，但不支持打印功能
+     * 设置后会自动将 ignoreHeight 和 ignoreWidth 设置为 false
+     */
+    page?: boolean;
+    /**
+     * 每页之间的间距
+     */
+    pageMarginBottom?: number;
+    /**
+     * 页面背景色
+     */
+    pageBackground?: string;
+    /**
+     * 是否显示页面阴影，只有在 page 为 true 的时候才生效
+     */
+    pageShadow?: boolean;
+    /**
+     * 显示页面包裹效果，只有在 page 为 true 的时候才生效
+     */
+    pageWrap?: boolean;
+    /**
+     * 页面包裹宽度
+     */
+    pageWrapPadding?: number;
+    /**
+     * 页面包裹背景色
+     */
+    pageWrapBackground?: string;
+    /**
+     * 缩放比例，取值 0-1 之间
+     */
+    zoom?: number;
+    /**
+     * 自适应宽度，如果设置了 zoom，那么 zoom 优先级更高，这个设置只在 ignoreWidth 为 false 的时候生效
+     */
+    zoomFitWidth?: boolean;
+    /**
+     * 打印可以覆盖其它配置
+     */
+    printOptions?: WordRenderOptions;
+    /**
+     * 是否渲染 header
+     */
+    renderHeader?: boolean;
+    /**
+     * 是否渲染 footer
+     */
+    renderFooter?: boolean;
 }
 export default class Word {
     /**
@@ -88,12 +143,28 @@ export default class Word {
      * 解析 numbering.xml 里的数据
      */
     numbering: Numbering;
+    settings: Settings;
     /**
      * 解析 styles.xml 里的数据
      */
     styles: Styles;
     renderOptions: WordRenderOptions;
+    /**
+     * 全局关系表
+     */
     relationships: Record<string, Relationship>;
+    /**
+     * 文档关系表
+     */
+    documentRels: Record<string, Relationship>;
+    /**
+     * 当前文档使用的关系表，比如 headers.xml 里的图片是
+     */
+    currentDocumentRels: Record<string, Relationship>;
+    /**
+     * 字体关系表
+     */
+    fontTableRels: Record<string, Relationship>;
     /**
      * 样式名映射，因为自定义样式名有可能不符合 css 命名规范，因此实际使用这个名字
      */
@@ -102,6 +173,10 @@ export default class Word {
      * 用于自动生成样式名时的计数，保证每次都是唯一的
      */
     styleIdNum: number;
+    /**
+     * 内置字体标
+     */
+    fontTable?: FontTable;
     /**
      * 渲染根节点
      */
@@ -111,6 +186,12 @@ export default class Word {
      * 当前渲染的段落，主要用于获取 fldSimple
      */
     currentParagraph: Paragraph;
+    footNotes: Record<string, Note>;
+    endNotes: Record<string, Note>;
+    /**
+     * 当前页码
+     */
+    currentPage: 0;
     /**
      * 构建 word
      *
@@ -120,6 +201,14 @@ export default class Word {
      */
     constructor(docFile: ArrayBuffer | string, renderOptions?: Partial<WordRenderOptions>, parser?: PackageParser);
     inited: boolean;
+    /**
+     * 分页标记，如果为 true，那么在渲染的时候会强制分页
+     */
+    breakPage: boolean;
+    /**
+     * 当前渲染的段，因为很多渲染需要，所以为了避免大量传参，这里直接挂在这里
+     */
+    currentSection: Section;
     /**
      * 初始化一些公共资源，比如
      */
@@ -132,6 +221,14 @@ export default class Word {
      * 解析全局样式
      */
     initStyle(): void;
+    /**
+     * 解析全局配置
+     */
+    initSettings(): void;
+    /**
+     * 解析字体表
+     */
+    initFontTable(): void;
     /**
      * 解析关系
      */
@@ -144,18 +241,29 @@ export default class Word {
      * 解析 numbering
      */
     initNumbering(): void;
+    initNotes(): void;
     /**
-     * 根据 id 获取关系
+     * 获取全局关系
      */
     getRelationship(id?: string): Relationship | null;
     /**
-     * 进行文本替换
+     * 获取文档对应的关系
+     */
+    getDocumentRels(id?: string): Relationship | null;
+    /**
+     * 获取字体对应的关系
+     */
+    getFontTableRels(id?: string): Relationship | null;
+    /**
+     * 进行单个文本替换
      */
     replaceText(text: string): string;
+    loadWordRelXML(relation: Relationship): Document;
     /**
      * 加载图片
      */
-    loadImage(relation: Relationship): Promise<string> | null;
+    loadImage(relation: Relationship): string | null;
+    loadFont(rId: string, key: string): string | null;
     /**
      * 解析 html
      */
@@ -171,21 +279,29 @@ export default class Word {
     /**
      * 添加新样式，主要用于表格的单元格样式
      */
-    appendStyle(style: string): void;
+    appendStyle(style?: string): void;
     /**
      * 返回样式表名及它的父级样式表名
      * @param styleId 样式表里的 style 名称
      * @returns 返回 className 数组
      */
     getStyleClassName(stylId: string): string[];
+    /**
+     * 根据 id 获取样式
+     * @param styleId
+     */
+    getStyle(styleId: string): import("./openxml/Style").Style;
     /**
      * 渲染时的 css 类前缀
      */
     getClassPrefix(): string;
     /**
-     * 获取主题色，目前基于 css 变量实现，方便动态修改
+     * 获取主题色
      */
     getThemeColor(name: string): string;
+    /**
+     * 添加类，自动加上前缀
+     */
     addClass(element: HTMLElement, className: string): void;
     /**
      * 更新页面中的变量，这个要在 render 后运行
@@ -198,11 +314,12 @@ export default class Word {
     /**
      * 打印功能
      */
-    print(): Promise<void>;
+    print(): Promise<any>;
     /**
      * 渲染文档入口
      *
      * @param root 渲染的根节点
+     * @param renderOptionsOverride 临时覆盖某些渲选项
      */
-    render(root: HTMLElement): Promise<void>;
+    render(root: HTMLElement, renderOptionsOverride?: Partial<WordRenderOptions>): Promise<void>;
 }