office-viewer 0.3.1 → 0.3.4

package/README.md

@@ -1,12 +1,12 @@
 # 说明
 
-docx 和 excel 渲染器
+Word 和 Excel 渲染器，目前接口还未完全稳定，新版可能会修改，请参考 examples
 
-## docx 渲染
+## Word 渲染
 
 ### 原理
 
-docx 渲染器，原理是将 docx 里的 xml 格式转成 html
+Word 渲染器，原理是将 docx 里的 xml 格式转成 html
 
 相对于 Canvas 渲染，这个实现方案比较简单，最终页面也可以很方便复制，但无法保证和原始 docx 文件展现一致，因为有部分功能难以在 HTML 中实现，比如图文环绕效果。
 
@@ -29,7 +29,7 @@ docx 渲染器，原理是将 docx 里的 xml 格式转成 html
 - [docx](https://github.com/dolanmiu/docx) 的类型定义
 - [docxjs](https://github.com/zVolodymyr/docxjs) 里格式的实现
 
-## xlsx 渲染
+## Excel 渲染
 
 ### 原理
 

package/dist/{index.css → office.css}

@@ -497,4 +497,4 @@
   overflow: hidden;
 }
 
-/*# sourceMappingURL=index.css.map */
+/*# sourceMappingURL=office.css.map */

package/dist/{index.css.map → office.css.map}

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/excel/excel.scss","../scss/excel/button.scss","../scss/excel/toolbar.scss","../scss/excel/checkbox.scss","../scss/excel/divider.scss","../scss/excel/input.scss","../scss/excel/select.scss","../scss/excel/formula-bar.scss","../scss/excel/sheet-tab-bar.scss","../scss/excel/sheet-tab/tab-list.scss","../scss/excel/content.scss","../scss/excel/scroll-bar.scss","../scss/excel/resize-box.scss","../scss/excel/auto-filter.scss","../scss/excel/auto-filter/sort-state.scss","../scss/excel/auto-filter/filters.scss","../scss/excel/auto-filter/custom-filters.scss","../scss/excel/cell-editor.scss","../scss/excel/chart.scss","../scss/excel/pic.scss"],"names":[],"mappings":";AAAA;AAEA;AACE;EACA;EAGA;EACA;EACA;EACA;EACA;;;ACXF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;ACpBF;AACA;EACE;EACA;;;ACHF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACnBF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA,QLwBa;;;AKrBf;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AClBF;EACE;EACA;;;ACFF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AC9BF;AACA;EACE;EACA;EACA;EACA;EACA;;;ACNF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ST5BqB;ES6BrB;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE,kBTrCe;;;ASwCjB;EACE,kBTzCe;;;AS4CjB;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA,kBT9Fa;;;ASkGjB;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADpIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AEhCF;AACA;EACE;EACA;EACA;EACA,SVSgB;;;AUNlB;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;EACE;EACA;EACA;EACA;EACA,SXamB;;;AWVrB;EACE;EACA;EACA;EACA;EACA,SXKmB;;;AWFrB;EACE;EACA;;;AAGF;EACE;;;ACtBF;AAEA;EACE;EACA;EACA,SZamB;;;AYVrB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SZG2B;;;AapB7B;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,SbMoB;;;AaHtB;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,SbXoB;EaYpB;;;AC7BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACpCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AClBF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACnBF;EACE;;;ACDF;EACE;EACA,SlBqBc;;;AmBvBhB;EACE;EACA,SnBsBY;EmBrBZ","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/excel/excel.scss","../scss/excel/button.scss","../scss/excel/toolbar.scss","../scss/excel/checkbox.scss","../scss/excel/divider.scss","../scss/excel/input.scss","../scss/excel/select.scss","../scss/excel/formula-bar.scss","../scss/excel/sheet-tab-bar.scss","../scss/excel/sheet-tab/tab-list.scss","../scss/excel/content.scss","../scss/excel/scroll-bar.scss","../scss/excel/resize-box.scss","../scss/excel/auto-filter.scss","../scss/excel/auto-filter/sort-state.scss","../scss/excel/auto-filter/filters.scss","../scss/excel/auto-filter/custom-filters.scss","../scss/excel/cell-editor.scss","../scss/excel/chart.scss","../scss/excel/pic.scss"],"names":[],"mappings":";AAAA;AAEA;AACE;EACA;EAGA;EACA;EACA;EACA;EACA;;;ACXF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;ACpBF;AACA;EACE;EACA;;;ACHF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACnBF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA,QLwBa;;;AKrBf;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AClBF;EACE;EACA;;;ACFF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AC9BF;AACA;EACE;EACA;EACA;EACA;EACA;;;ACNF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ST5BqB;ES6BrB;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE,kBTrCe;;;ASwCjB;EACE,kBTzCe;;;AS4CjB;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA,kBT9Fa;;;ASkGjB;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADpIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AEhCF;AACA;EACE;EACA;EACA;EACA,SVSgB;;;AUNlB;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;EACE;EACA;EACA;EACA;EACA,SXamB;;;AWVrB;EACE;EACA;EACA;EACA;EACA,SXKmB;;;AWFrB;EACE;EACA;;;AAGF;EACE;;;ACtBF;AAEA;EACE;EACA;EACA,SZamB;;;AYVrB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SZG2B;;;AapB7B;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,SbMoB;;;AaHtB;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,SbXoB;EaYpB;;;AC7BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACpCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AClBF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACnBF;EACE;;;ACDF;EACE;EACA,SlBqBc;;;AmBvBhB;EACE;EACA,SnBsBY;EmBrBZ","file":"office.css"}

package/esm/Excel.d.ts

@@ -42,6 +42,7 @@ export default class Excel implements OfficeViewer {
      * 加载 Excel 文件
      */
     loadExcel(): Promise<void>;
+    loaded: boolean;
     /**
      * 加载 CSV 文件
      */

package/esm/Excel.js

@@ -20,7 +20,7 @@ var defaultRenderOptions = {
         return get(data, path);
     },
     useWorker: false,
-    height: 400,
+    height: 500,
     gridLineColor: '#D4D4D4',
     gridLineWidth: 1,
     dragGridLineColor: '#5D5D5D',
@@ -53,6 +53,8 @@ var defaultRenderOptions = {
 var Excel = /** @class */ (function () {
     function Excel(docFile, fileName, renderOptions, parser) {
         if (parser === void 0) { parser = new ZipPackageParser(); }
+        // 后续优化一下
+        this.loaded = false;
         this.id = Excel.globalId++;
         this.parser = parser;
         this.docFile = docFile;
@@ -71,6 +73,9 @@ var Excel = /** @class */ (function () {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        if (this.loaded) {
+                            return [2 /*return*/];
+                        }
                         this.parser.load(this.docFile);
                         startParse = performance.now();
                         _a = this;
@@ -81,6 +86,7 @@ var Excel = /** @class */ (function () {
                             console.log('parse time', performance.now() - startParse, 'ms');
                             console.log('excelFile', this.excelFile);
                         }
+                        this.loaded = true;
                         return [2 /*return*/];
                 }
             });
@@ -95,6 +101,9 @@ var Excel = /** @class */ (function () {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        if (this.loaded) {
+                            return [2 /*return*/];
+                        }
                         // 目前 csv 的实现复用了 xlsx 的解析
                         this.parser.load(emptyXLSX);
                         _a = this;
@@ -112,6 +121,7 @@ var Excel = /** @class */ (function () {
                         if (this.fileName) {
                             this.excelFile.workbook.sheets[0].name = this.fileName.split('/').pop();
                         }
+                        this.loaded = true;
                         return [2 /*return*/];
                 }
             });

package/esm/excel/render/ScrollBar.js

@@ -70,7 +70,7 @@ var ScrollBar = /** @class */ (function () {
         xScrollBarContent.addEventListener('scroll', function (event) {
             var currentSheet = _this.workbook.getActiveSheet();
             var sheetScrollLeft = currentSheet.getScrollLeft();
-            var scrollBarLeft = yScrollBarContent.scrollTop;
+            var scrollBarLeft = xScrollBarContent.scrollLeft;
             if (Math.round(sheetScrollLeft) !== Math.round(scrollBarLeft)) {
                 currentSheet.setScrollLeft(xScrollBarContent.scrollLeft);
                 _this.workbook.uiEvent.emit('SCROLL_X', xScrollBarContent.scrollLeft);

package/esm/excel/render/autoFilter/sortState/setColumnSortOrder.js

@@ -23,6 +23,7 @@ function setColumnSortOrder(sheet, colIndex, rangeRef, autoFilter, sortOrder, he
             ref: sortStateRef,
             sortCondition: [sortCondition]
         };
+        sheet.applyAutoFilter(autoFilter, headerRowCount);
         return;
     }
     if (autoFilter.sortState.sortCondition === undefined) {

package/esm/excel/render/dnd/getMouseRelativePosition.js

@@ -3,8 +3,8 @@
  */
 function getMouseRelativePosition(container, event) {
     var dataContainerOffset = container.getBoundingClientRect();
-    var offsetX = event.pageX - dataContainerOffset.x;
-    var offsetY = event.pageY - dataContainerOffset.y;
+    var offsetX = event.clientX - dataContainerOffset.x;
+    var offsetY = event.clientY - dataContainerOffset.y;
     return { offsetX: offsetX, offsetY: offsetY };
 }
 

package/lib/Excel.d.ts

@@ -42,6 +42,7 @@ export default class Excel implements OfficeViewer {
      * 加载 Excel 文件
      */
     loadExcel(): Promise<void>;
+    loaded: boolean;
     /**
      * 加载 CSV 文件
      */

package/lib/Excel.js

@@ -42,7 +42,7 @@ var defaultRenderOptions = {
         return get.get(data, path);
     },
     useWorker: false,
-    height: 400,
+    height: 500,
     gridLineColor: '#D4D4D4',
     gridLineWidth: 1,
     dragGridLineColor: '#5D5D5D',
@@ -75,6 +75,8 @@ var defaultRenderOptions = {
 var Excel = /** @class */ (function () {
     function Excel(docFile, fileName, renderOptions, parser) {
         if (parser === void 0) { parser = new ZipPackageParser["default"](); }
+        // 后续优化一下
+        this.loaded = false;
         this.id = Excel.globalId++;
         this.parser = parser;
         this.docFile = docFile;
@@ -93,6 +95,9 @@ var Excel = /** @class */ (function () {
             return tslib.__generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        if (this.loaded) {
+                            return [2 /*return*/];
+                        }
                         this.parser.load(this.docFile);
                         startParse = performance.now();
                         _a = this;
@@ -103,6 +108,7 @@ var Excel = /** @class */ (function () {
                             console.log('parse time', performance.now() - startParse, 'ms');
                             console.log('excelFile', this.excelFile);
                         }
+                        this.loaded = true;
                         return [2 /*return*/];
                 }
             });
@@ -117,6 +123,9 @@ var Excel = /** @class */ (function () {
             return tslib.__generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        if (this.loaded) {
+                            return [2 /*return*/];
+                        }
                         // 目前 csv 的实现复用了 xlsx 的解析
                         this.parser.load(emptyXLSX.emptyXLSX);
                         _a = this;
@@ -134,6 +143,7 @@ var Excel = /** @class */ (function () {
                         if (this.fileName) {
                             this.excelFile.workbook.sheets[0].name = this.fileName.split('/').pop();
                         }
+                        this.loaded = true;
                         return [2 /*return*/];
                 }
             });

package/lib/createOfficeViewer.d.ts

@@ -13,4 +13,4 @@ import { PackageParser } from './package/PackageParser';
  * @param parser 文件解析器，支持 zip 和 xml 两种，也可以扩展
  * @returns OfficeViewer 实例
  */
-export declare function createOfficeViewer(docFile: ArrayBuffer, renderOptions?: Partial<RenderOptions>, fileName?: string, parser?: PackageParser): Promise<Word | UnSupport | Excel>;
+export declare function createOfficeViewer(docFile: ArrayBuffer, renderOptions?: Partial<RenderOptions>, fileName?: string, parser?: PackageParser): Promise<Excel | Word | UnSupport>;

package/lib/excel/lang/lang.d.ts

@@ -23,7 +23,7 @@ declare const languages: {
         count: string;
         sum: string;
     };
-    zh_CN: Record<"count" | "sum" | "average" | "customFilter.equal" | "customFilter.notEqual" | "customFilter.beginsWith" | "customFilter.notBeginsWith" | "customFilter.endsWith" | "customFilter.notEndsWith" | "customFilter.contains" | "customFilter.notContains" | "customFilter.greaterThan" | "customFilter.greaterThanOrEqual" | "customFilter.lessThan" | "customFilter.lessThanOrEqual" | "autoFilter.sortAscending" | "autoFilter.sortDescending" | "checkBox.selectAll" | "checkBox.search" | "customFilter.and" | "customFilter.or", string>;
+    zh_CN: Record<"autoFilter.sortAscending" | "autoFilter.sortDescending" | "checkBox.selectAll" | "checkBox.search" | "customFilter.equal" | "customFilter.notEqual" | "customFilter.greaterThan" | "customFilter.greaterThanOrEqual" | "customFilter.lessThan" | "customFilter.lessThanOrEqual" | "customFilter.beginsWith" | "customFilter.notBeginsWith" | "customFilter.endsWith" | "customFilter.notEndsWith" | "customFilter.contains" | "customFilter.notContains" | "customFilter.and" | "customFilter.or" | "average" | "count" | "sum", string>;
 };
 export type Language = keyof typeof languages;
 export declare function getTranslate(language: string): (key: EnKeys) => string;

package/lib/excel/render/ScrollBar.js

@@ -74,7 +74,7 @@ var ScrollBar = /** @class */ (function () {
         xScrollBarContent.addEventListener('scroll', function (event) {
             var currentSheet = _this.workbook.getActiveSheet();
             var sheetScrollLeft = currentSheet.getScrollLeft();
-            var scrollBarLeft = yScrollBarContent.scrollTop;
+            var scrollBarLeft = xScrollBarContent.scrollLeft;
             if (Math.round(sheetScrollLeft) !== Math.round(scrollBarLeft)) {
                 currentSheet.setScrollLeft(xScrollBarContent.scrollLeft);
                 _this.workbook.uiEvent.emit('SCROLL_X', xScrollBarContent.scrollLeft);

package/lib/excel/render/autoFilter/sortState/getColumnSortOrder.d.ts

@@ -3,4 +3,4 @@
  */
 import { CT_SortState } from '../../../../openxml/ExcelTypes';
 import { RangeRef } from '../../../types/RangeRef';
-export declare function getColumnSortOrder(colIndex: number, rangeRef: RangeRef, sortState?: CT_SortState): "desc" | "none" | "asc";
+export declare function getColumnSortOrder(colIndex: number, rangeRef: RangeRef, sortState?: CT_SortState): "asc" | "desc" | "none";

package/lib/excel/render/autoFilter/sortState/setColumnSortOrder.js

@@ -27,6 +27,7 @@ function setColumnSortOrder(sheet, colIndex, rangeRef, autoFilter, sortOrder, he
             ref: sortStateRef,
             sortCondition: [sortCondition]
         };
+        sheet.applyAutoFilter(autoFilter, headerRowCount);
         return;
     }
     if (autoFilter.sortState.sortCondition === undefined) {

package/lib/excel/render/dnd/getMouseRelativePosition.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
  */
 function getMouseRelativePosition(container, event) {
     var dataContainerOffset = container.getBoundingClientRect();
-    var offsetX = event.pageX - dataContainerOffset.x;
-    var offsetY = event.pageY - dataContainerOffset.y;
+    var offsetX = event.clientX - dataContainerOffset.x;
+    var offsetY = event.clientY - dataContainerOffset.y;
     return { offsetX: offsetX, offsetY: offsetY };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "office-viewer",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "description": "office 文档在线预览",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -8,7 +8,7 @@
   "scripts": {
     "dev": "vite --host",
     "start": "vite --host",
-    "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c && sass scss/office.scss dist/index.css",
+    "build": "npm run clean-dist && cross-env NODE_ENV=production rollup -c && sass scss/office.scss dist/office.css",
     "build-esm": "npm run clean-dist && cross-env NODE_ENV=production rollup -c rollup.esm.config.js",
     "test": "jest",
     "lib": "npm run clean-dist && cross-env NODE_ENV=production IS_LIB=1 rollup -c",
@@ -119,4 +119,4 @@
       "printBasicPrototype": false
     }
   }
-}
+}