office-viewer 0.1.0 → 0.1.3

package/README.md

@@ -6,8 +6,13 @@ docx 渲染器，原理是将 docx 里的 xml 格式转成 html
 
 相对于 Canvas 渲染，这个实现方案比较简单，最终页面也可以很方便复制，但无法保证和原始 docx 文件展现一致，因为有部分功能难以在 HTML 中实现，比如图文环绕效果。
 
-## 还不支持的功能
+## 已知不支持的功能
 
+- 分页符
+- 形状
+- 艺术字
+- 域
+- 对象
 - wmf，需要使用 https://github.com/SheetJS/js-wmf
 
 ## 参考资料
@@ -15,7 +20,7 @@ docx 渲染器，原理是将 docx 里的 xml 格式转成 html
 - [官方规范](https://www.ecma-international.org/publications-and-standards/standards/ecma-376/)
 - [标签的在线文档](http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/index.html)
 
-日常开发可以使用 [OOXML viewer](https://marketplace.visualstudio.com/items?itemName=yuenm18.ooxml-viewer) 插件查看
+日常开发可以使用 [OOXML viewer](https://marketplace.visualstudio.com/items?itemName=yuenm18.office-viewer) 插件查看
 
 开发过程啊参考了
 

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

@@ -5,7 +5,10 @@
  * 获取 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 类型
@@ -53,8 +56,46 @@ 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);
 }
 
-export { getAttrBoolean, getVal, getValBoolean, getValHex, getValNumber, normalizeBoolean };
+export { getAttrBoolean, getAttrNumber, getAttrPercent, getVal, getValBoolean, getValHex, getValNumber, normalizeBoolean };

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