office-viewer 0.1.0 → 0.1.4

package/esm/Word.js

@@ -1,32 +1,52 @@
-import { __values, __assign, __awaiter, __generator } from './node_modules/tslib/tslib.es6.js';
+import { __values, __awaiter, __generator, __assign } from 'tslib';
+import { FontTable } from './openxml/word/FontTable.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 { downloadBlob } from './util/blob.js';
 import { Numbering } from './openxml/word/numbering/Numbering.js';
-import { appendChild } from './util/dom.js';
+import { createElement, 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';
+import { deobfuscate } from './openxml/word/Font.js';
+import { renderFont } from './render/renderFont.js';
+import { replaceVar, replaceT } from './util/replaceVar.js';
+import { parseFootnotes } from './parse/Footnotes.js';
+import { parseEndnotes } from './parse/parseEndnotes.js';
+import { renderNotes } from './render/renderNotes.js';
+import { printIframe } from './util/print.js';
+import { Settings } from './openxml/Settings.js';
+import { get } from './util/get.js';
 
-/**
- * 总入口，它将包括所有 word 文档信息，后续渲染的时候依赖它来获取关联信息
- */
 var defaultRenderOptions = {
-    imageDataURL: false,
     classPrefix: 'docx-viewer',
-    inWrap: true,
+    page: false,
+    pageWrap: true,
     bulletUseFont: true,
     ignoreHeight: true,
-    ignoreWidth: true,
+    ignoreWidth: false,
     minLineHeight: 1.0,
     enableVar: false,
-    debug: false
+    debug: false,
+    pageWrapPadding: 20,
+    pageMarginBottom: 20,
+    pageShadow: true,
+    pageBackground: '#FFFFFF',
+    pageWrapBackground: '#ECECEC',
+    printWaitTime: 100,
+    zoomFitWidth: false,
+    renderHeader: true,
+    renderFooter: true,
+    data: {},
+    evalVar: function (path, data) {
+        return get(data, path);
+    }
 };
 var Word = /** @class */ (function () {
     /**
@@ -51,11 +71,21 @@ var Word = /** @class */ (function () {
          */
         this.styleIdNum = 0;
         this.wrapClassName = 'docx-viewer-wrapper';
+        this.footNotes = {};
+        this.endNotes = {};
         this.inited = false;
+        /**
+         * 分页标记，如果为 true，那么在渲染的时候会强制分页
+         */
+        this.breakPage = false;
         parser.load(docFile);
         this.id = Word.globalId++;
         this.parser = parser;
         this.renderOptions = __assign(__assign({}, defaultRenderOptions), renderOptions);
+        if (this.renderOptions.page) {
+            this.renderOptions.ignoreHeight = false;
+            this.renderOptions.ignoreWidth = false;
+        }
     }
     /**
      * 初始化一些公共资源，比如
@@ -66,10 +96,14 @@ var Word = /** @class */ (function () {
         }
         // 这个必须在最前面，因为后面很多依赖它来查找文件的
         this.initContentType();
+        // relation 需要排第二
+        this.initRelation();
+        this.initSettings();
         this.initTheme();
+        this.initFontTable();
         this.initStyle();
-        this.initRelation();
         this.initNumbering();
+        this.initNotes();
         this.inited = true;
     };
     /**
@@ -115,6 +149,48 @@ var Word = /** @class */ (function () {
             finally { if (e_2) throw e_2.error; }
         }
     };
+    /**
+     * 解析全局配置
+     */
+    Word.prototype.initSettings = 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/settings.xml')) {
+                    this.settings = Settings.parse(this, this.parser.getXML('/word/settings.xml'));
+                }
+            }
+        }
+        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; }
+        }
+    };
+    /**
+     * 解析字体表
+     */
+    Word.prototype.initFontTable = function () {
+        var e_4, _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/fontTable.xml')) {
+                    this.fontTable = FontTable.fromXML(this, this.parser.getXML('/word/fontTable.xml'));
+                }
+            }
+        }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_4) throw e_4.error; }
+        }
+    };
     /**
      * 解析关系
      */
@@ -123,11 +199,17 @@ var Word = /** @class */ (function () {
         if (this.parser.fileExists('/_rels/.rels')) {
             rels = parseRelationships(this.parser.getXML('/_rels/.rels'), 'root');
         }
+        this.relationships = rels;
         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);
+        this.documentRels = documentRels;
+        var fontTableRels = {};
+        if (this.parser.fileExists('/word/_rels/fontTable.xml.rels')) {
+            fontTableRels = parseRelationships(this.parser.getXML('/word/_rels/fontTable.xml.rels'), 'word');
+        }
+        this.fontTableRels = fontTableRels;
     };
     /**
      * 解析全局配置
@@ -140,7 +222,7 @@ var Word = /** @class */ (function () {
      * 解析 numbering
      */
     Word.prototype.initNumbering = function () {
-        var e_3, _a;
+        var e_5, _a;
         try {
             for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var override = _c.value;
@@ -150,32 +232,90 @@ var Word = /** @class */ (function () {
                 }
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_5) throw e_5.error; }
+        }
+    };
+    Word.prototype.initNotes = function () {
+        var e_6, _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/footnotes.xml')) {
+                    var notesData = this.parser.getXML(override.partName);
+                    this.footNotes = parseFootnotes(this, notesData);
+                }
+                if (override.partName.startsWith('/word/endnotes.xml')) {
+                    var notesData = this.parser.getXML(override.partName);
+                    this.endNotes = parseEndnotes(this, notesData);
+                }
+            }
+        }
+        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_6) throw e_6.error; }
         }
     };
     /**
-     * 根据 id 获取关系
+     * 获取全局关系
      */
     Word.prototype.getRelationship = function (id) {
-        if (id) {
+        if (id && this.relationships) {
             return this.relationships[id];
         }
         return null;
     };
     /**
-     * 进行文本替换
+     * 获取文档对应的关系
+     */
+    Word.prototype.getDocumentRels = function (id) {
+        if (id && this.documentRels) {
+            return this.documentRels[id];
+        }
+        return null;
+    };
+    /**
+     * 获取字体对应的关系
+     */
+    Word.prototype.getFontTableRels = function (id) {
+        if (id && this.fontTableRels) {
+            return this.fontTableRels[id];
+        }
+        return null;
+    };
+    /**
+     * 进行单个文本替换
      */
     Word.prototype.replaceText = function (text) {
-        if (this.renderOptions.enableVar === false ||
-            !this.renderOptions.replaceText) {
+        var _this = this;
+        if (this.renderOptions.enableVar === false) {
             return text;
         }
-        return this.renderOptions.replaceText(text);
+        var data = this.renderOptions.data;
+        if (text.indexOf('{{') !== -1) {
+            text = text.replace(/{{([^}]+)}}/g, function (all, group) {
+                var result = _this.renderOptions.evalVar(group, data);
+                if (typeof result === 'undefined') {
+                    return '';
+                }
+                return String(result);
+            });
+        }
+        return text;
+    };
+    Word.prototype.loadWordRelXML = function (relation) {
+        var path = relation.target;
+        if (relation.part === 'word') {
+            path = 'word/' + path;
+        }
+        return this.getXML(path);
     };
     /**
      * 加载图片
@@ -187,14 +327,22 @@ var Word = /** @class */ (function () {
         }
         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 URL.createObjectURL(data);
+        }
+        return null;
+    };
+    Word.prototype.loadFont = function (rId, key) {
+        var relation = this.getFontTableRels(rId);
+        if (!relation) {
+            return null;
+        }
+        var path = relation.target;
+        if (relation.part === 'word') {
+            path = 'word/' + path;
+        }
+        var data = this.parser.getFileByType(path, 'uint8array');
+        if (data) {
+            return URL.createObjectURL(new Blob([deobfuscate(data, key)]));
         }
         return null;
     };
@@ -233,8 +381,9 @@ var Word = /** @class */ (function () {
      * 添加新样式，主要用于表格的单元格样式
      */
     Word.prototype.appendStyle = function (style) {
-        var styleElement = document.createElement('style');
-        styleElement.innerHTML = style;
+        if (style === void 0) { style = ''; }
+        var styleElement = createElement('style');
+        styleElement.textContent = style;
         this.rootElement.appendChild(styleElement);
     };
     /**
@@ -253,6 +402,13 @@ var Word = /** @class */ (function () {
         }
         return classNames;
     };
+    /**
+     * 根据 id 获取样式
+     * @param styleId
+     */
+    Word.prototype.getStyle = function (styleId) {
+        return this.styles.styleMap[styleId];
+    };
     /**
      * 渲染时的 css 类前缀
      */
@@ -260,11 +416,31 @@ var Word = /** @class */ (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)");
+        var _a, _b;
+        if (this.settings.clrSchemeMapping) {
+            name = this.settings.clrSchemeMapping[name] || name;
+        }
+        if (this.themes && this.themes.length > 0) {
+            var theme = this.themes[0];
+            var colors = (_b = (_a = theme.themeElements) === null || _a === void 0 ? void 0 : _a.clrScheme) === null || _b === void 0 ? void 0 : _b.colors;
+            var color = colors === null || colors === void 0 ? void 0 : colors[name];
+            if (color) {
+                return color;
+            }
+            else {
+                // 找不到可能是从其它地方拷贝过来的，这时取 accent1
+                console.warn('unknown theme color: ' + name);
+                return (colors === null || colors === void 0 ? void 0 : colors['accent1']) || '';
+            }
+        }
+        return '';
     };
+    /**
+     * 添加类，自动加上前缀
+     */
     Word.prototype.addClass = function (element, className) {
         element.classList.add("".concat(this.getClassPrefix(), "-").concat(className));
     };
@@ -272,9 +448,7 @@ var Word = /** @class */ (function () {
      * 更新页面中的变量，这个要在 render 后运行
      */
     Word.prototype.updateVariable = function () {
-        if (!this.rootElement ||
-            this.renderOptions.enableVar === false ||
-            !this.renderOptions.replaceText) {
+        if (!this.rootElement || this.renderOptions.enableVar === false) {
             return;
         }
         updateVariableText(this);
@@ -285,12 +459,13 @@ var Word = /** @class */ (function () {
     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) {
+        if (this.renderOptions.enableVar) {
             mergeRun(this, documentData);
+            replaceVar(this, documentData);
             // 对文本进行替换
             var ts = documentData.getElementsByTagName('w:t');
             for (var i = 0; i < ts.length; i++) {
-                ts[i].textContent = this.replaceText(ts[i].textContent || '');
+                replaceT(this, ts[i], this.renderOptions.data);
             }
         }
         var blob = this.parser.generateZip(buildXML(documentData));
@@ -300,26 +475,28 @@ var Word = /** @class */ (function () {
      * 打印功能
      */
     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) {
+            var iframe, printDocument;
+            return __generator(this, function (_a) {
+                switch (_a.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'))];
+                        printDocument = iframe.contentDocument;
+                        if (!printDocument) {
+                            console.warn('printDocument is null');
+                            return [2 /*return*/, null];
+                        }
+                        printDocument.write("<style>\n      html, body { margin:0; padding:0 }\n      @page { size: auto; margin: 0mm; }\n      </style>\n      <div id=\"print\"></div>");
+                        return [4 /*yield*/, this.render(printDocument.getElementById('print'), __assign({ page: true, pageWrap: false, pageShadow: false, pageMarginBottom: 0, pageWrapPadding: undefined, zoom: 1 }, this.renderOptions.printOptions))];
                     case 1:
-                        _c.sent();
+                        _a.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);
+                            printIframe(iframe);
+                        }, this.renderOptions.printWaitTime || 100); // 需要等一下图片渲染
                         window.focus();
                         return [2 /*return*/];
                 }
@@ -330,32 +507,40 @@ var Word = /** @class */ (function () {
      * 渲染文档入口
      *
      * @param root 渲染的根节点
+     * @param renderOptionsOverride 临时覆盖某些渲选项
      */
-    Word.prototype.render = function (root) {
+    Word.prototype.render = function (root, renderOptionsOverride) {
+        if (renderOptionsOverride === void 0) { renderOptionsOverride = {}; }
         return __awaiter(this, void 0, void 0, function () {
             var renderOptions, isDebug, documentData, document, documentElement;
             return __generator(this, function (_a) {
                 this.init();
-                renderOptions = this.renderOptions;
+                this.currentPage = 0;
+                renderOptions = __assign(__assign({}, this.renderOptions), renderOptionsOverride);
                 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) {
+                if (renderOptions.enableVar) {
                     mergeRun(this, documentData);
+                    replaceVar(this, documentData);
                     // 这里不进行变量替换，方便后续进行局部替换来更新变量
                 }
                 document = WDocument.fromXML(this, documentData);
                 isDebug && console.log('document', document);
-                documentElement = renderDocument(this, document);
+                documentElement = renderDocument(root, this, document, renderOptions);
                 root.classList.add(this.getClassPrefix());
-                if (renderOptions.inWrap) {
+                if (renderOptions.page && renderOptions.pageWrap) {
                     root.classList.add(this.wrapClassName);
+                    root.style.padding = "".concat(renderOptions.pageWrapPadding || 0, "pt");
+                    root.style.background = renderOptions.pageWrapBackground || '#ECECEC';
                 }
                 appendChild(root, renderStyle(this));
+                appendChild(root, renderFont(this.fontTable));
                 appendChild(root, documentElement);
+                appendChild(root, renderNotes(this));
                 return [2 /*return*/];
             });
         });

package/esm/openxml/ContentType.js

@@ -1,14 +1,28 @@
+import { __values } from 'tslib';
+
 /**
  * 解析 [Content_Types].xml
  */
 function parseContentType(doc) {
+    var e_1, _a;
     var types = { overrides: [] };
-    doc.querySelectorAll('Override').forEach(function (item) {
-        types.overrides.push({
-            partName: item.getAttribute('PartName'),
-            contentType: item.getAttribute('ContentType')
-        });
-    });
+    var overrides = [].slice.call(doc.getElementsByTagName('Override'));
+    try {
+        for (var overrides_1 = __values(overrides), overrides_1_1 = overrides_1.next(); !overrides_1_1.done; overrides_1_1 = overrides_1.next()) {
+            var item = overrides_1_1.value;
+            types.overrides.push({
+                partName: item.getAttribute('PartName'),
+                contentType: item.getAttribute('ContentType')
+            });
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (overrides_1_1 && !overrides_1_1.done && (_a = overrides_1.return)) _a.call(overrides_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
     return types;
 }
 

package/esm/openxml/Settings.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 解析 settings.xml，只支持一小部分
+ *
+ */
+import Word from '../Word';
+export declare class Settings {
+    clrSchemeMapping: Record<string, string>;
+    autoHyphenation: boolean;
+    static parse(word: Word, doc: Document): Settings;
+}

package/esm/openxml/Settings.js

@@ -0,0 +1,93 @@
+import { __values } from 'tslib';
+import { getValBoolean } from '../OpenXML.js';
+
+/**
+ * 解析 settings.xml，只支持一小部分
+ *
+ */
+/**
+ * 解析颜色映射
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/clrSchemeMapping.html
+ */
+function parseClrSchemeMapping(element) {
+    var e_1, _a;
+    var clrSchemeMapping = {};
+    try {
+        for (var _b = __values(element.attributes), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var attribute = _c.value;
+            var name_1 = attribute.name.replace('w:', '');
+            var value = attribute.value;
+            // 文档里也说了这个等于 lt1
+            if (value === 'light1') {
+                value = 'lt1';
+            }
+            else if (value === 'light2') {
+                value = 'lt2';
+            }
+            else if (value === 'dark1') {
+                value = 'dk1';
+            }
+            else if (value === 'dark2') {
+                value = 'dk2';
+            }
+            clrSchemeMapping[name_1] = value;
+        }
+    }
+    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; }
+    }
+    if (!clrSchemeMapping.bg1) {
+        clrSchemeMapping.bg1 = 'lt1';
+    }
+    if (!clrSchemeMapping.bg2) {
+        clrSchemeMapping.bg2 = 'lt2';
+    }
+    if (!clrSchemeMapping.tx1) {
+        clrSchemeMapping.tx1 = 'dk1';
+    }
+    return clrSchemeMapping;
+}
+var Settings = /** @class */ (function () {
+    function Settings() {
+        this.clrSchemeMapping = {};
+        this.autoHyphenation = false;
+    }
+    Settings.parse = function (word, doc) {
+        var e_2, _a;
+        var settings = new Settings();
+        var rootElement = doc;
+        if (doc.firstElementChild &&
+            doc.firstElementChild.tagName === 'w:settings') {
+            rootElement = doc.getElementsByTagName('w:settings').item(0);
+        }
+        try {
+            for (var _b = __values(Array.from(rootElement.children)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                var tag = child.tagName;
+                switch (tag) {
+                    case 'w:clrSchemeMapping':
+                        settings.clrSchemeMapping = parseClrSchemeMapping(child);
+                        break;
+                    case 'w:autoHyphenation':
+                        settings.autoHyphenation = getValBoolean(child, false);
+                        break;
+                }
+            }
+        }
+        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; }
+        }
+        return settings;
+    };
+    return Settings;
+}());
+
+export { Settings };

package/esm/openxml/Style.d.ts

@@ -9,7 +9,7 @@ import { TablePr } from './word/Table';
 import { TcPr } from './word/table/Tc';
 import { TrPr } from './word/table/Tr';
 export interface CSSStyle {
-    [key: string]: string;
+    [key: string]: string | number;
 }
 export interface TblStylePrStyle {
     rPr?: RunPr;