office-viewer 0.1.0

package/README.md

@@ -0,0 +1,23 @@
+# 说明
+
+## 原理
+
+docx 渲染器，原理是将 docx 里的 xml 格式转成 html
+
+相对于 Canvas 渲染，这个实现方案比较简单，最终页面也可以很方便复制，但无法保证和原始 docx 文件展现一致，因为有部分功能难以在 HTML 中实现，比如图文环绕效果。
+
+## 还不支持的功能
+
+- wmf，需要使用 https://github.com/SheetJS/js-wmf
+
+## 参考资料
+
+- [官方规范](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) 插件查看
+
+开发过程啊参考了
+
+- [docx](https://github.com/dolanmiu/docx) 的类型定义
+- [docxjs](https://github.com/zVolodymyr/docxjs) 里格式的实现

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

@@ -0,0 +1,60 @@
+/**
+ * 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);
+}
+
+export { getAttrBoolean, getVal, getValBoolean, getValHex, getValNumber, normalizeBoolean };

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

package/esm/Word.js

@@ -0,0 +1,370 @@
+import { __values, __assign, __awaiter, __generator } from './node_modules/tslib/tslib.es6.js';
+import { parseRelationships } from './parse/parseRelationship.js';
+import { parseContentType } from './openxml/ContentType.js';
+import { parseStyles } from './openxml/Style.js';
+import { parseTheme } from './openxml/Theme.js';
+import renderDocument from './render/renderDocument.js';
+import { blobToDataURL, downloadBlob } from './util/blob.js';
+import { Numbering } from './openxml/word/numbering/Numbering.js';
+import { appendChild } from './util/dom.js';
+import { renderStyle } from './render/renderStyle.js';
+import { mergeRun } from './util/mergeRun.js';
+import { WDocument } from './openxml/word/WDocument.js';
+import { updateVariableText } from './render/renderRun.js';
+import ZipPackageParser from './package/ZipPackageParser.js';
+import { buildXML } from './util/xml.js';
+
+/**
+ * 总入口，它将包括所有 word 文档信息，后续渲染的时候依赖它来获取关联信息
+ */
+var defaultRenderOptions = {
+    imageDataURL: false,
+    classPrefix: 'docx-viewer',
+    inWrap: true,
+    bulletUseFont: true,
+    ignoreHeight: true,
+    ignoreWidth: true,
+    minLineHeight: 1.0,
+    enableVar: false,
+    debug: false
+};
+var Word = /** @class */ (function () {
+    /**
+     * 构建 word
+     *
+     * @param docxFile docx 文件
+     * @param options 渲染配置
+     * @param packaParser 包解析器
+     */
+    function Word(docFile, renderOptions, parser) {
+        if (parser === void 0) { parser = new ZipPackageParser(); }
+        /**
+         * 解析 theme 目录里的数据
+         */
+        this.themes = [];
+        /**
+         * 样式名映射，因为自定义样式名有可能不符合 css 命名规范，因此实际使用这个名字
+         */
+        this.styleIdMap = {};
+        /**
+         * 用于自动生成样式名时的计数，保证每次都是唯一的
+         */
+        this.styleIdNum = 0;
+        this.wrapClassName = 'docx-viewer-wrapper';
+        this.inited = false;
+        parser.load(docFile);
+        this.id = Word.globalId++;
+        this.parser = parser;
+        this.renderOptions = __assign(__assign({}, defaultRenderOptions), renderOptions);
+    }
+    /**
+     * 初始化一些公共资源，比如
+     */
+    Word.prototype.init = function () {
+        if (this.inited) {
+            return;
+        }
+        // 这个必须在最前面，因为后面很多依赖它来查找文件的
+        this.initContentType();
+        this.initTheme();
+        this.initStyle();
+        this.initRelation();
+        this.initNumbering();
+        this.inited = true;
+    };
+    /**
+     * 解析全局主题配置
+     */
+    Word.prototype.initTheme = function () {
+        var e_1, _a;
+        try {
+            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var override = _c.value;
+                if (override.partName.startsWith('/word/theme')) {
+                    var theme = this.parser.getXML(override.partName);
+                    this.themes.push(parseTheme(theme));
+                }
+            }
+        }
+        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; }
+        }
+    };
+    /**
+     * 解析全局样式
+     */
+    Word.prototype.initStyle = function () {
+        var e_2, _a;
+        try {
+            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var override = _c.value;
+                if (override.partName.startsWith('/word/styles.xml')) {
+                    this.styles = parseStyles(this, this.parser.getXML('/word/styles.xml'));
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    };
+    /**
+     * 解析关系
+     */
+    Word.prototype.initRelation = function () {
+        var rels = {};
+        if (this.parser.fileExists('/_rels/.rels')) {
+            rels = parseRelationships(this.parser.getXML('/_rels/.rels'), 'root');
+        }
+        var documentRels = {};
+        if (this.parser.fileExists('/word/_rels/document.xml.rels')) {
+            documentRels = parseRelationships(this.parser.getXML('/word/_rels/document.xml.rels'), 'word');
+        }
+        this.relationships = __assign(__assign({}, rels), documentRels);
+    };
+    /**
+     * 解析全局配置
+     */
+    Word.prototype.initContentType = function () {
+        var contentType = this.parser.getXML('[Content_Types].xml');
+        this.conentTypes = parseContentType(contentType);
+    };
+    /**
+     * 解析 numbering
+     */
+    Word.prototype.initNumbering = function () {
+        var e_3, _a;
+        try {
+            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var override = _c.value;
+                if (override.partName.startsWith('/word/numbering')) {
+                    var numberingData = this.parser.getXML(override.partName);
+                    this.numbering = Numbering.fromXML(this, numberingData);
+                }
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+    };
+    /**
+     * 根据 id 获取关系
+     */
+    Word.prototype.getRelationship = function (id) {
+        if (id) {
+            return this.relationships[id];
+        }
+        return null;
+    };
+    /**
+     * 进行文本替换
+     */
+    Word.prototype.replaceText = function (text) {
+        if (this.renderOptions.enableVar === false ||
+            !this.renderOptions.replaceText) {
+            return text;
+        }
+        return this.renderOptions.replaceText(text);
+    };
+    /**
+     * 加载图片
+     */
+    Word.prototype.loadImage = function (relation) {
+        var path = relation.target;
+        if (relation.part === 'word') {
+            path = 'word/' + path;
+        }
+        var data = this.parser.getFileByType(path, 'blob');
+        if (data) {
+            if (this.renderOptions.imageDataURL) {
+                return blobToDataURL(data);
+            }
+            else {
+                return new Promise(function (resolve, reject) {
+                    resolve(URL.createObjectURL(data));
+                });
+            }
+        }
+        return null;
+    };
+    /**
+     * 解析 html
+     */
+    Word.prototype.getXML = function (filePath) {
+        return this.parser.getXML(filePath);
+    };
+    /**
+     * 获取 styleId 的显示名称，因为这里可以自定义，理论上会出现 css 不支持的语法
+     */
+    Word.prototype.getStyleIdDisplayName = function (styleId) {
+        /**
+         * 简单判断一下，如果是合法的 css 名称，就直接返回
+         * In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".
+         */
+        if (styleId.match(/^[a-zA-Z]+[a-zA-Z0-9\-\_]*$/)) {
+            return this.getClassPrefix() + '-' + styleId;
+        }
+        if (styleId in this.styleIdMap) {
+            return this.styleIdMap[styleId];
+        }
+        else {
+            this.styleIdMap[styleId] = this.genClassName();
+            return this.styleIdMap[styleId];
+        }
+    };
+    /**
+     * 生成个新的唯一的 class 名称
+     */
+    Word.prototype.genClassName = function () {
+        return 'docx-classname-' + this.styleIdNum++;
+    };
+    /**
+     * 添加新样式，主要用于表格的单元格样式
+     */
+    Word.prototype.appendStyle = function (style) {
+        var styleElement = document.createElement('style');
+        styleElement.innerHTML = style;
+        this.rootElement.appendChild(styleElement);
+    };
+    /**
+     * 返回样式表名及它的父级样式表名
+     * @param styleId 样式表里的 style 名称
+     * @returns 返回 className 数组
+     */
+    Word.prototype.getStyleClassName = function (stylId) {
+        var style = this.styles.styleMap[stylId];
+        if (!style) {
+            return [];
+        }
+        var classNames = [this.getStyleIdDisplayName(stylId)];
+        if (style.basedOn) {
+            classNames.unshift(this.getStyleIdDisplayName(style.basedOn));
+        }
+        return classNames;
+    };
+    /**
+     * 渲染时的 css 类前缀
+     */
+    Word.prototype.getClassPrefix = function () {
+        return "".concat(this.renderOptions.classPrefix, "-").concat(this.id);
+    };
+    /**
+     * 获取主题色，目前基于 css 变量实现，方便动态修改
+     */
+    Word.prototype.getThemeColor = function (name) {
+        return "var(--docx-".concat(this.id, "-theme-").concat(name, "-color)");
+    };
+    Word.prototype.addClass = function (element, className) {
+        element.classList.add("".concat(this.getClassPrefix(), "-").concat(className));
+    };
+    /**
+     * 更新页面中的变量，这个要在 render 后运行
+     */
+    Word.prototype.updateVariable = function () {
+        if (!this.rootElement ||
+            this.renderOptions.enableVar === false ||
+            !this.renderOptions.replaceText) {
+            return;
+        }
+        updateVariableText(this);
+    };
+    /**
+     * 下载生成的文档，会对 word/document.xml 进行处理，替换文本
+     */
+    Word.prototype.download = function (fileName) {
+        if (fileName === void 0) { fileName = 'document.docx'; }
+        var documentData = this.getXML('word/document.xml');
+        if (this.renderOptions.enableVar && this.renderOptions.replaceText) {
+            mergeRun(this, documentData);
+            // 对文本进行替换
+            var ts = documentData.getElementsByTagName('w:t');
+            for (var i = 0; i < ts.length; i++) {
+                ts[i].textContent = this.replaceText(ts[i].textContent || '');
+            }
+        }
+        var blob = this.parser.generateZip(buildXML(documentData));
+        downloadBlob(blob, fileName);
+    };
+    /**
+     * 打印功能
+     */
+    Word.prototype.print = function () {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var iframe;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        iframe = document.createElement('iframe');
+                        iframe.style.position = 'absolute';
+                        iframe.style.top = '-10000px';
+                        document.body.appendChild(iframe);
+                        (_a = iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.write('<div id="print"></div>');
+                        return [4 /*yield*/, this.render((_b = iframe.contentDocument) === null || _b === void 0 ? void 0 : _b.getElementById('print'))];
+                    case 1:
+                        _c.sent();
+                        setTimeout(function () {
+                            var _a, _b;
+                            iframe.focus();
+                            (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.print();
+                            (_b = iframe.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(iframe);
+                        }, 100);
+                        window.focus();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 渲染文档入口
+     *
+     * @param root 渲染的根节点
+     */
+    Word.prototype.render = function (root) {
+        return __awaiter(this, void 0, void 0, function () {
+            var renderOptions, isDebug, documentData, document, documentElement;
+            return __generator(this, function (_a) {
+                this.init();
+                renderOptions = this.renderOptions;
+                isDebug = renderOptions.debug;
+                isDebug && console.log('init', this);
+                this.rootElement = root;
+                root.innerHTML = '';
+                documentData = this.getXML('word/document.xml');
+                isDebug && console.log('documentData', documentData);
+                if (renderOptions.enableVar && renderOptions.replaceText) {
+                    mergeRun(this, documentData);
+                    // 这里不进行变量替换，方便后续进行局部替换来更新变量
+                }
+                document = WDocument.fromXML(this, documentData);
+                isDebug && console.log('document', document);
+                documentElement = renderDocument(this, document);
+                root.classList.add(this.getClassPrefix());
+                if (renderOptions.inWrap) {
+                    root.classList.add(this.wrapClassName);
+                }
+                appendChild(root, renderStyle(this));
+                appendChild(root, documentElement);
+                return [2 /*return*/];
+            });
+        });
+    };
+    /**
+     * 全局 id，用于一个页面渲染多个 word 文档
+     */
+    Word.globalId = 0;
+    return Word;
+}());
+
+export { Word as default };

package/esm/index.d.ts

@@ -0,0 +1,6 @@
+import Word from './Word';
+export { Word };
+declare const _default: {
+    Word: typeof Word;
+};
+export default _default;

package/esm/index.js

@@ -0,0 +1,6 @@
+import Word from './Word.js';
+export { default as Word } from './Word.js';
+
+var index = { Word: Word };
+
+export { index as default };