office-viewer 0.2.0 → 0.3.0

package/README.md

@@ -1,19 +1,23 @@
 # 说明
 
-## 原理
+docx 和 excel 渲染器
+
+## docx 渲染
+
+### 原理
 
 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)
@@ -24,3 +28,9 @@ docx 渲染器，原理是将 docx 里的 xml 格式转成 html
 
 - [docx](https://github.com/dolanmiu/docx) 的类型定义
 - [docxjs](https://github.com/zVolodymyr/docxjs) 里格式的实现
+
+## xlsx 渲染
+
+### 原理
+
+使用 Canvas 渲染

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

@@ -0,0 +1,200 @@
+import { __assign, __awaiter, __generator } from 'tslib';
+import { get } from './util/get.js';
+import ZipPackageParser from './package/ZipPackageParser.js';
+import { parseExcel } from './excel/io/parseExcel.js';
+import { Workbook } from './excel/Workbook.js';
+import { LocalDataProvider } from './excel/data/LocalDataProvider.js';
+import { printIframe } from './util/print.js';
+import { emptyXLSX } from './excel/io/csv/emptyXLSX.js';
+import { arrayBufferToString } from './util/arrayBufferToString.js';
+
+/**
+ * Excel 渲染主入口
+ */
+/**
+ * 默认渲染配置项
+ */
+var defaultRenderOptions = {
+    data: {},
+    evalVar: function (path, data) {
+        return 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(); }
+        this.id = Excel.globalId++;
+        this.parser = parser;
+        this.docFile = docFile;
+        this.fileName = fileName;
+        this.updateOptions(renderOptions || {});
+    }
+    Excel.prototype.updateOptions = function (options) {
+        this.renderOptions = __assign(__assign({}, defaultRenderOptions), options);
+    };
+    /**
+     * 加载 Excel 文件
+     */
+    Excel.prototype.loadExcel = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var startParse, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        this.parser.load(this.docFile);
+                        startParse = performance.now();
+                        _a = this;
+                        return [4 /*yield*/, 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 __awaiter(this, void 0, void 0, function () {
+            var _a, papaparse, result;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        // 目前 csv 的实现复用了 xlsx 的解析
+                        this.parser.load(emptyXLSX);
+                        _a = this;
+                        return [4 /*yield*/, parseExcel(this.parser)];
+                    case 1:
+                        _a.excelFile = _b.sent();
+                        return [4 /*yield*/, import('papaparse')];
+                    case 2:
+                        papaparse = _b.sent();
+                        result = papaparse.parse(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 __awaiter(this, void 0, void 0, function () {
+            var renderOptions, height, workbookData, workbook;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.rootElement = root;
+                        root.innerHTML = '';
+                        renderOptions = __assign(__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(root, workbookData, new 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 __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                throw new Error('must implement this method');
+            });
+        });
+    };
+    Excel.prototype.print = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var iframe, printDocument;
+            return __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();
+                    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;
+}());
+
+export { Excel as default };

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

@@ -0,0 +1,33 @@
+import { __awaiter, __generator } from '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 __awaiter(this, void 0, void 0, function () {
+            return __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;
+}());
+
+export { UnSupport as default };

package/esm/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;
     /**
      * 解析全局主题配置
      */

package/esm/Word.js

@@ -1,25 +1,25 @@
-import { __values, __awaiter, __generator, __assign } from 'tslib';
+import { __assign, __values, __awaiter, __generator } from 'tslib';
 import { FontTable } from './openxml/word/FontTable.js';
-import { parseRelationships } from './parse/parseRelationship.js';
+import { parseRelationships } from './word/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 renderDocument from './word/render/renderDocument.js';
 import { downloadBlob } from './util/blob.js';
 import { Numbering } from './openxml/word/numbering/Numbering.js';
 import { createElement, appendChild } from './util/dom.js';
-import { renderStyle } from './render/renderStyle.js';
+import { renderStyle } from './word/render/renderStyle.js';
 import { mergeRun } from './util/mergeRun.js';
 import { WDocument } from './openxml/word/WDocument.js';
-import { updateVariableText } from './render/renderRun.js';
+import { updateVariableText } from './word/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 { renderFont } from './word/render/renderFont.js';
 import { replaceT, replaceVar } from './util/replaceVar.js';
-import { parseFootnotes } from './parse/Footnotes.js';
-import { parseEndnotes } from './parse/parseEndnotes.js';
-import { renderNotes } from './render/renderNotes.js';
+import { parseFootnotes } from './word/parse/Footnotes.js';
+import { parseEndnotes } from './word/parse/parseEndnotes.js';
+import { renderNotes } from './word/render/renderNotes.js';
 import { printIframe } from './util/print.js';
 import { Settings } from './openxml/Settings.js';
 import { get } from './util/get.js';
@@ -83,11 +83,7 @@ var Word = /** @class */ (function () {
         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;
-        }
+        this.updateOptions(renderOptions);
     }
     /**
      * 初始化一些公共资源，比如
@@ -108,13 +104,20 @@ var Word = /** @class */ (function () {
         this.initNotes();
         this.inited = true;
     };
+    Word.prototype.updateOptions = function (options) {
+        this.renderOptions = __assign(__assign({}, defaultRenderOptions), options);
+        if (this.renderOptions.page) {
+            this.renderOptions.ignoreHeight = false;
+            this.renderOptions.ignoreWidth = false;
+        }
+    };
     /**
      * 解析全局主题配置
      */
     Word.prototype.initTheme = function () {
         var e_1, _a;
         try {
-            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(this.contentTypes.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);
@@ -136,7 +139,7 @@ var Word = /** @class */ (function () {
     Word.prototype.initStyle = function () {
         var e_2, _a;
         try {
-            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(this.contentTypes.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'));
@@ -157,7 +160,7 @@ var Word = /** @class */ (function () {
     Word.prototype.initSettings = function () {
         var e_3, _a;
         try {
-            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(this.contentTypes.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'));
@@ -178,7 +181,7 @@ var Word = /** @class */ (function () {
     Word.prototype.initFontTable = function () {
         var e_4, _a;
         try {
-            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(this.contentTypes.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'));
@@ -218,7 +221,7 @@ var Word = /** @class */ (function () {
      */
     Word.prototype.initContentType = function () {
         var contentType = this.parser.getXML('[Content_Types].xml');
-        this.conentTypes = parseContentType(contentType);
+        this.contentTypes = parseContentType(contentType);
     };
     /**
      * 解析 numbering
@@ -226,7 +229,7 @@ var Word = /** @class */ (function () {
     Word.prototype.initNumbering = function () {
         var e_5, _a;
         try {
-            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(this.contentTypes.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);
@@ -245,7 +248,7 @@ var Word = /** @class */ (function () {
     Word.prototype.initNotes = function () {
         var e_6, _a;
         try {
-            for (var _b = __values(this.conentTypes.overrides), _c = _b.next(); !_c.done; _c = _b.next()) {
+            for (var _b = __values(this.contentTypes.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);
@@ -534,7 +537,7 @@ var Word = /** @class */ (function () {
                             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))];
+                        return [4 /*yield*/, this.render(printDocument.getElementById('print'), __assign({ pageWrap: false, pageShadow: false, pageMarginBottom: 0, pageWrapPadding: undefined, zoom: 1 }, this.renderOptions.printOptions))];
                     case 1:
                         _a.sent();
                         setTimeout(function () {

package/esm/common/__tests__/autoParse.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/common/autoParse.d.ts

@@ -0,0 +1,9 @@
+import { Attributes } from '../openxml/Attributes';
+import { XMLNode } from '../util/xml';
+/**
+ * 通用属性解析
+ * @param node xml 节点
+ * @param attributes 属性定义
+ * @param fillDefault 是否补上默认值
+ */
+export declare function autoParse(node: XMLNode | null, attributes: Attributes, fillDefault?: boolean): any;