office-viewer 0.2.0 → 0.3.0

package/esm/word/render/renderTable.js

@@ -0,0 +1,189 @@
+import { __values } from 'tslib';
+import { Paragraph } from '../../openxml/word/Paragraph.js';
+import { Table } from '../../openxml/word/Table.js';
+import { addClassName, applyStyle, appendChild } from '../../util/dom.js';
+import renderParagraph from './renderParagraph.js';
+import { generateTableStyle } from './renderStyle.js';
+import { setElementStyle } from './setElementStyle.js';
+
+/**
+ * 设置 td 的类，用于支持各种表格条件样式
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/ST_TblStyleOverrideType.html
+ */
+function setTdClassName(rowIndex, colIndex, rowLength, colLength, element, rowBandSize, colBandSize) {
+    // 左上角
+    if (rowIndex === 0 && colIndex === 0) {
+        element.classList.add('nwCell');
+    }
+    // 右上角
+    if (rowIndex === 0 && colIndex === colLength - 1) {
+        element.classList.add('neCell');
+    }
+    // 左下角
+    if (rowIndex === rowLength - 1 && colIndex === 0) {
+        element.classList.add('swCell');
+    }
+    // 右下角
+    if (rowIndex === rowLength - 1 && colIndex === colLength - 1) {
+        element.classList.add('seCell');
+    }
+    // 第一行
+    if (rowIndex === 0) {
+        element.classList.add('firstRow');
+    }
+    // 最后一行
+    if (rowIndex === rowLength - 1) {
+        element.classList.add('lastRow');
+    }
+    // 第一列
+    if (colIndex === 0) {
+        element.classList.add('firstCol');
+    }
+    // 最后一列
+    if (colIndex === colLength - 1) {
+        element.classList.add('lastCol');
+    }
+    // 奇数行
+    if (isOdd(rowIndex + 1)) {
+        element.classList.add('band1Horz');
+    }
+    // 偶数行
+    if (!isOdd(rowIndex + 1)) {
+        element.classList.add('band2Horz');
+    }
+    // 奇数列
+    if (isOdd(colIndex + 1)) {
+        element.classList.add('band1Vert');
+    }
+    // 偶数列
+    if (!isOdd(colIndex + 1)) {
+        element.classList.add('band2Vert');
+    }
+}
+/**
+ * 根据倍数判断是否是奇数，目前看来似乎 word 编辑器也没提供 size 设置
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/tblStyleRowBandSize.html
+ */
+function isOdd(num, size) {
+    return !(num % 2);
+}
+/**
+ * 渲染表格
+ */
+function renderTable(word, table) {
+    var e_1, _a, e_2, _b, e_3, _c;
+    var tableEl = document.createElement('table');
+    var properties = table.properties;
+    if (properties.tblCaption) {
+        var caption = document.createElement('caption');
+        caption.textContent = properties.tblCaption;
+        tableEl.appendChild(caption);
+    }
+    if (properties.tblLook) {
+        for (var key in properties.tblLook) {
+            // 这两个属性是反过来的
+            if (key === 'noHBand') {
+                if (!properties.tblLook[key]) {
+                    addClassName(tableEl, 'enable-hBand');
+                }
+            }
+            else if (key === 'noVBand') {
+                if (!properties.tblLook[key]) {
+                    addClassName(tableEl, 'enable-vBand');
+                }
+            }
+            else if (properties.tblLook[key]) {
+                addClassName(tableEl, 'enable-' + key);
+            }
+        }
+    }
+    setElementStyle(word, tableEl, properties);
+    var customClass = word.genClassName();
+    tableEl.classList.add(customClass);
+    word.appendStyle(generateTableStyle(word.getClassPrefix(), customClass, { tblPr: properties }));
+    // 这里或许应该生成 classname 来支持 tcCSSStyle
+    var tbody = document.createElement('tbody');
+    tableEl.appendChild(tbody);
+    var rowIndex = 0;
+    try {
+        for (var _d = __values(table.trs), _e = _d.next(); !_e.done; _e = _d.next()) {
+            var tr = _e.value;
+            var trEl = document.createElement('tr');
+            tbody.appendChild(trEl);
+            var colIndex = 0;
+            try {
+                for (var _f = (e_2 = void 0, __values(tr.tcs)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var tc = _g.value;
+                    var tdEl = document.createElement('td');
+                    trEl.appendChild(tdEl);
+                    setTdClassName(rowIndex, colIndex, table.trs.length, tr.tcs.length, tdEl, properties.rowBandSize, properties.colBandSize);
+                    // tr 也能设置 tc style，所以先应用这个
+                    if (tr.properties.tcStyle) {
+                        applyStyle(tdEl, tr.properties.tcStyle);
+                    }
+                    var tcPr = tc.properties;
+                    setElementStyle(word, tdEl, tcPr);
+                    if (tcPr.gridSpan) {
+                        tdEl.colSpan = tcPr.gridSpan;
+                    }
+                    if (tcPr.rowSpan) {
+                        tdEl.rowSpan = tcPr.rowSpan;
+                    }
+                    var renderSpace = true;
+                    // 如果有 tcPr.hideMark 就不渲染空格
+                    if (tcPr.hideMark) {
+                        renderSpace = false;
+                    }
+                    try {
+                        for (var _h = (e_3 = void 0, __values(tc.children)), _j = _h.next(); !_j.done; _j = _h.next()) {
+                            var tcChild = _j.value;
+                            if (tcChild instanceof Paragraph) {
+                                var p = renderParagraph(word, tcChild, renderSpace);
+                                appendChild(tdEl, p);
+                            }
+                            else if (tcChild instanceof Table) {
+                                // 如果已经有表格的话，就不再渲染空段落了，避免底部多个空行
+                                renderSpace = false;
+                                appendChild(tdEl, renderTable(word, tcChild));
+                            }
+                            else {
+                                console.warn('unknown child type: ' + tcChild);
+                            }
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_j && !_j.done && (_c = _h.return)) _c.call(_h);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                    if (tcPr.rowSpan) {
+                        colIndex += tcPr.rowSpan;
+                    }
+                    else {
+                        colIndex++;
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            rowIndex++;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return tableEl;
+}
+
+export { renderTable as default };

package/esm/word/render/setElementStyle.d.ts

@@ -0,0 +1,6 @@
+import { Properties } from '../../openxml/word/properties/Properties';
+import Word from '../../Word';
+/**
+ * 设置元素样式，因为好几个地方用所以统一一下
+ */
+export declare function setElementStyle(word: Word, element: HTMLElement, properties: Properties | undefined): void;

package/esm/word/render/setElementStyle.js

@@ -0,0 +1,26 @@
+import { applyStyle, addClassName, addClassNames } from '../../util/dom.js';
+
+/**
+ * 设置元素样式，因为好几个地方用所以统一一下
+ */
+function setElementStyle(word, element, properties) {
+    if (!properties) {
+        return;
+    }
+    if (properties.cssStyle) {
+        applyStyle(element, properties.cssStyle);
+        // 目前默认最后一行用左对齐
+        // 这里用 class 的主要原因是方便用户自己覆盖，比如可能有语言需要右对齐
+        if (properties.cssStyle['text-align'] === 'justify') {
+            addClassName(element, 'justify');
+        }
+    }
+    if (properties.pStyle) {
+        addClassNames(element, word.getStyleClassName(properties.pStyle));
+    }
+    if (properties.rStyle) {
+        addClassNames(element, word.getStyleClassName(properties.rStyle));
+    }
+}
+
+export { setElementStyle };

package/lib/Excel.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Excel 渲染主入口
+ */
+import { OfficeViewer } from './OfficeViewer';
+import { PackageParser } from './package/PackageParser';
+import { ExcelFile } from './excel/types/ExcelFile';
+import { ExcelRender } from './excel/render/ExcelRender';
+import { Workbook } from './excel/Workbook';
+import { ExcelRenderOptions } from './excel/sheet/ExcelRenderOptions';
+export default class Excel implements OfficeViewer {
+    /**
+     * 全局 id，用于一个页面渲染多个文档
+     */
+    static globalId: number;
+    /**
+     * 当前渲染 id
+     */
+    id: number;
+    renderOptions: ExcelRenderOptions;
+    /**
+     * 渲染根节点
+     */
+    rootElement?: HTMLElement;
+    /**
+     * 文件解析器
+     */
+    parser: PackageParser;
+    /**
+     * 文件内容
+     */
+    excelFile?: ExcelFile;
+    /**
+     * 渲染实例
+     */
+    excelRender?: ExcelRender;
+    workbook?: Workbook;
+    docFile: ArrayBuffer;
+    fileName?: string;
+    constructor(docFile: ArrayBuffer, fileName?: string, renderOptions?: Partial<ExcelRenderOptions>, parser?: PackageParser);
+    updateOptions(options: any): void;
+    /**
+     * 加载 Excel 文件
+     */
+    loadExcel(): Promise<void>;
+    /**
+     * 加载 CSV 文件
+     */
+    loadCSV(fileExt: 'csv' | 'tsv'): Promise<void>;
+    /**
+     * Excel 渲染入口
+     * @param root 渲染根节点
+     * @param renderOptionsOverride 临时覆盖某些渲选项
+     */
+    render(root: HTMLElement, renderOptionsOverride?: Partial<ExcelRenderOptions>): Promise<void>;
+    download(fileName: string): Promise<void>;
+    print(): Promise<void>;
+    getWorkbook(): Workbook | undefined;
+    updateVariable(): void;
+}

package/lib/Excel.js

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var get = require('./util/get.js');
+var ZipPackageParser = require('./package/ZipPackageParser.js');
+var parseExcel = require('./excel/io/parseExcel.js');
+var Workbook = require('./excel/Workbook.js');
+var LocalDataProvider = require('./excel/data/LocalDataProvider.js');
+var print = require('./util/print.js');
+var emptyXLSX = require('./excel/io/csv/emptyXLSX.js');
+var arrayBufferToString = require('./util/arrayBufferToString.js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+/**
+ * Excel 渲染主入口
+ */
+/**
+ * 默认渲染配置项
+ */
+var defaultRenderOptions = {
+    data: {},
+    evalVar: function (path, data) {
+        return get.get(data, path);
+    },
+    useWorker: false,
+    height: 400,
+    gridLineColor: '#D4D4D4',
+    gridLineWidth: 1,
+    dragGridLineColor: '#5D5D5D',
+    frozenLineColor: '#00A92F',
+    gridLineHitRange: 4,
+    showRowColHeaders: true,
+    rowColHeadersColor: '#575757',
+    rowColHeadersBackgroundColor: '#F5F5F5',
+    rowColHeadersLineColor: '#E3E2E2',
+    hiddenRowColHeadersColor: '#575757',
+    hiddenRowColHeadersLineColor: '#217346',
+    hiddenRowColHeadersLineSize: 3,
+    // 选区的配置
+    selectionBorderColor: '#005500',
+    selectionSquareSize: 4,
+    selectionBackgroundColor: '#00B683',
+    selectionBackgroundOpacity: 0.2,
+    // 大概 2 个数字的宽度
+    indentSize: 15.845,
+    backgroundColor: '#F5F5F5',
+    cellBackgroundColor: '#FFFFFF',
+    showFormulaBar: true,
+    showSheetTabBar: true,
+    locale: 'zh-CN',
+    // 默认嵌入模式
+    embed: true,
+    editable: false,
+    fontURL: {}
+};
+var Excel = /** @class */ (function () {
+    function Excel(docFile, fileName, renderOptions, parser) {
+        if (parser === void 0) { parser = new ZipPackageParser["default"](); }
+        this.id = Excel.globalId++;
+        this.parser = parser;
+        this.docFile = docFile;
+        this.fileName = fileName;
+        this.updateOptions(renderOptions || {});
+    }
+    Excel.prototype.updateOptions = function (options) {
+        this.renderOptions = tslib.__assign(tslib.__assign({}, defaultRenderOptions), options);
+    };
+    /**
+     * 加载 Excel 文件
+     */
+    Excel.prototype.loadExcel = function () {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var startParse, _a;
+            return tslib.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        this.parser.load(this.docFile);
+                        startParse = performance.now();
+                        _a = this;
+                        return [4 /*yield*/, parseExcel.parseExcel(this.parser)];
+                    case 1:
+                        _a.excelFile = _b.sent();
+                        if (this.renderOptions.debug) {
+                            console.log('parse time', performance.now() - startParse, 'ms');
+                            console.log('excelFile', this.excelFile);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 加载 CSV 文件
+     */
+    Excel.prototype.loadCSV = function (fileExt) {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var _a, papaparse, result;
+            return tslib.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        // 目前 csv 的实现复用了 xlsx 的解析
+                        this.parser.load(emptyXLSX.emptyXLSX);
+                        _a = this;
+                        return [4 /*yield*/, parseExcel.parseExcel(this.parser)];
+                    case 1:
+                        _a.excelFile = _b.sent();
+                        return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('papaparse')); })];
+                    case 2:
+                        papaparse = _b.sent();
+                        result = papaparse.parse(arrayBufferToString.arrayBufferToString(this.docFile), {
+                            delimiter: fileExt === 'csv' ? ',' : '\t'
+                        });
+                        this.excelFile.workbook.sheets[0].worksheet.cellData =
+                            result.data;
+                        if (this.fileName) {
+                            this.excelFile.workbook.sheets[0].name = this.fileName.split('/').pop();
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Excel 渲染入口
+     * @param root 渲染根节点
+     * @param renderOptionsOverride 临时覆盖某些渲选项
+     */
+    Excel.prototype.render = function (root, renderOptionsOverride) {
+        if (renderOptionsOverride === void 0) { renderOptionsOverride = {}; }
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var renderOptions, height, workbookData, workbook;
+            return tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.rootElement = root;
+                        root.innerHTML = '';
+                        renderOptions = tslib.__assign(tslib.__assign({}, this.renderOptions), renderOptionsOverride);
+                        root.style.position = 'relative';
+                        height = root.getBoundingClientRect().height;
+                        if (height === 0) {
+                            height = renderOptions.height;
+                            root.style.height = height + 'px';
+                        }
+                        if (!this.excelFile) {
+                            console.warn('excel file not loaded');
+                            return [2 /*return*/];
+                        }
+                        workbookData = this.excelFile.workbook;
+                        workbook = new Workbook.Workbook(root, workbookData, new LocalDataProvider.LocalDataProvider(workbookData, renderOptions), renderOptions);
+                        return [4 /*yield*/, workbook.render()];
+                    case 1:
+                        _a.sent();
+                        this.workbook = workbook;
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Excel.prototype.download = function (fileName) {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            return tslib.__generator(this, function (_a) {
+                throw new Error('must implement this method');
+            });
+        });
+    };
+    Excel.prototype.print = function () {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var iframe, printDocument;
+            return tslib.__generator(this, function (_a) {
+                if (!this.workbook) {
+                    return [2 /*return*/];
+                }
+                iframe = document.createElement('iframe');
+                iframe.style.position = 'absolute';
+                iframe.style.top = '-10000px';
+                document.body.appendChild(iframe);
+                printDocument = iframe.contentDocument;
+                if (!printDocument) {
+                    console.warn('printDocument is null');
+                    return [2 /*return*/];
+                }
+                this.workbook.renderInIframe(iframe);
+                setTimeout(function () {
+                    iframe.focus();
+                    print.printIframe(iframe);
+                }, this.renderOptions.printWaitTime || 100); // 需要等一下图片渲染
+                window.focus();
+                return [2 /*return*/];
+            });
+        });
+    };
+    Excel.prototype.getWorkbook = function () {
+        return this.workbook;
+    };
+    Excel.prototype.updateVariable = function () { };
+    /**
+     * 全局 id，用于一个页面渲染多个文档
+     */
+    Excel.globalId = 0;
+    return Excel;
+}());
+
+exports["default"] = Excel;

package/lib/OfficeViewer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 对外统一接口
+ */
+export interface OfficeViewer {
+    render(root: HTMLElement, options: any): Promise<void>;
+    updateOptions(options: any): void;
+    download(fileName: string): Promise<void>;
+    print(): void;
+    updateVariable(): void;
+}

package/lib/RenderOptions.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 一些通用的渲染配置项
+ */
+export interface RenderOptions {
+    /**
+     * 是否开启变量替换功能
+     */
+    enableVar?: boolean;
+    /**
+     * 上下文数据，用于替换变量
+     */
+    data?: any;
+    /**
+     * 进行表达式计算的函数，第一个参数是文本变量，第二个参数是上下文数据
+     */
+    evalVar: (text: string, data?: Object) => Object | string | number | boolean | null | undefined;
+    /**
+     * 是否开启调试模式
+     */
+    debug?: boolean;
+    /**
+     * 字体映射，用于替换文档中的字体
+     */
+    fontMapping?: Record<string, string>;
+}

package/lib/UnSupport.d.ts

@@ -0,0 +1,13 @@
+import { OfficeViewer } from './OfficeViewer';
+/**
+ * 不支持的文件类型，主要用于显示报错信息
+ */
+export default class UnSupport implements OfficeViewer {
+    errorMessage: string;
+    constructor(errorMessage: string);
+    updateOptions(options: any): void;
+    updateVariable(): void;
+    render(root: HTMLElement, options: any): Promise<void>;
+    download(fileName: string): Promise<void>;
+    print(): void;
+}

package/lib/UnSupport.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+
+/**
+ * 不支持的文件类型，主要用于显示报错信息
+ */
+var UnSupport = /** @class */ (function () {
+    function UnSupport(errorMessage) {
+        this.errorMessage = errorMessage;
+    }
+    UnSupport.prototype.updateOptions = function (options) {
+        throw new Error('Method not implemented.');
+    };
+    UnSupport.prototype.updateVariable = function () {
+        throw new Error('Method not implemented.');
+    };
+    UnSupport.prototype.render = function (root, options) {
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            return tslib.__generator(this, function (_a) {
+                root.innerHTML = this.errorMessage;
+                return [2 /*return*/];
+            });
+        });
+    };
+    UnSupport.prototype.download = function (fileName) {
+        throw new Error('Method not implemented.');
+    };
+    UnSupport.prototype.print = function () {
+        throw new Error('Method not implemented.');
+    };
+    return UnSupport;
+}());
+
+exports["default"] = UnSupport;

package/lib/Word.d.ts

@@ -2,7 +2,7 @@ import { FontTable } from './openxml/word/FontTable';
 /**
  * 总入口，它将包括所有 word 文档信息，后续渲染的时候依赖它来获取关联信息
  */
-import { Relationship } from './parse/parseRelationship';
+import { Relationship } from './word/parse/parseRelationship';
 import { ContentTypes } from './openxml/ContentType';
 import { Styles } from './openxml/Style';
 import { Theme } from './openxml/Theme';
@@ -12,10 +12,12 @@ import { Paragraph } from './openxml/word/Paragraph';
 import { Note } from './openxml/word/Note';
 import { Section } from './openxml/word/Section';
 import { Settings } from './openxml/Settings';
+import { OfficeViewer } from './OfficeViewer';
+import { RenderOptions } from './RenderOptions';
 /**
  * 渲染配置
  */
-export interface WordRenderOptions {
+export interface WordRenderOptions extends RenderOptions {
     /**
      * css 类前缀
      */
@@ -40,26 +42,6 @@ export interface WordRenderOptions {
      * 最小行高
      */
     minLineHeight?: number;
-    /**
-     * 是否开启变量替换功能
-     */
-    enableVar?: boolean;
-    /**
-     * 上下文数据，用于替换变量
-     */
-    data?: any;
-    /**
-     * 进行表达式计算的函数，第一个参数是文本变量，第二个参数是上下文数据
-     */
-    evalVar: (text: string, data?: Object) => Object | string | number | boolean | null | undefined;
-    /**
-     * 是否开启调试模式
-     */
-    debug?: boolean;
-    /**
-     * 字体映射，用于替换文档中的字体
-     */
-    fontMapping?: Record<string, string>;
     /**
      * 强制行高，设置之后所有文本都使用这个行高，可以优化排版效果
      */
@@ -118,7 +100,7 @@ export interface WordRenderOptions {
      */
     renderFooter?: boolean;
 }
-export default class Word {
+export default class Word implements OfficeViewer {
     /**
      * 全局 id，用于一个页面渲染多个 word 文档
      */
@@ -134,7 +116,7 @@ export default class Word {
     /**
      * 解析 [Content_Types].xml 里的数据
      */
-    conentTypes: ContentTypes;
+    contentTypes: ContentTypes;
     /**
      * 解析 theme 目录里的数据
      */
@@ -214,6 +196,7 @@ export default class Word {
      * 初始化一些公共资源，比如
      */
     init(): void;
+    updateOptions(options: any): void;
     /**
      * 解析全局主题配置
      */