office-viewer 0.3.2 → 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/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',

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.js

@@ -42,7 +42,7 @@ var defaultRenderOptions = {
         return get.get(data, path);
     },
     useWorker: false,
-    height: 400,
+    height: 500,
     gridLineColor: '#D4D4D4',
     gridLineWidth: 1,
     dragGridLineColor: '#5D5D5D',

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/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): "none" | "asc" | "desc";
+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.2",
+  "version": "0.3.4",
   "description": "office 文档在线预览",
   "main": "lib/index.js",
   "module": "esm/index.js",

package/dist/index.css

@@ -1,500 +0,0 @@
-@charset "UTF-8";
-/* 默认 CSS 样式，目前主要是 Excel 使用 */
-.ov-excel {
-  /* 从 office 365 中复制的默认字体 */
-  font-family: "Aptos Narrow", "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-  display: flex;
-  flex-direction: column;
-  --bar-bg-color: #f5f5f5;
-  --bar-input-bg-color: #ffffff;
-  --active-sheet-color: #217346;
-}
-
-.excel-button {
-  height: 32px;
-  color: rgb(255, 255, 255);
-  padding: 0px 11px;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  display: inline-block;
-  text-decoration: none;
-  text-align: center;
-  cursor: pointer;
-  vertical-align: top;
-  border-radius: 2px;
-  font-size: 14px;
-  font-weight: 600;
-  position: relative;
-  margin-right: 4px;
-  width: 64px;
-}
-
-.excel-button-primary {
-  background-color: rgb(0, 120, 212);
-}
-
-/* Excel 工具栏，目前没编辑功能所以还没实现 */
-.ov-excel-toolbar {
-  height: 30px;
-  line-height: 30px;
-}
-
-.excel-checkbox-list-wrapper .excel-checkbox-list {
-  margin-top: 4px;
-}
-
-.excel-checkbox-container label {
-  cursor: pointer;
-  padding: 4px 0;
-  display: block;
-}
-
-.excel-checkbox-container label:hover {
-  background-color: #f6f6f6;
-}
-
-.excel-checkbox-container input {
-  vertical-align: middle;
-}
-
-.excel-checkbox-container span {
-  vertical-align: middle;
-}
-
-.excel-divider {
-  display: block;
-  height: 1px;
-  background-color: rgb(225, 223, 221);
-  margin: 2px 12px 2px;
-  color: rgb(200, 198, 196);
-  border-radius: 0.5px;
-}
-
-.excel-input {
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  padding: 4px 12px;
-  border: 1px solid rgb(209, 209, 209);
-}
-
-.excel-input-border-less {
-  display: block;
-  border: none;
-  width: 100%;
-  height: 100%;
-  padding: 0 2px;
-}
-
-.excel-input-border-less:focus {
-  outline: none;
-}
-
-.excel-select {
-  border-color: rgb(209, 209, 209);
-  border-radius: 4px;
-}
-
-/* Excel 公式栏 */
-.ov-excel-formula-bar {
-  height: 34px;
-  display: flex;
-  flex-direction: row;
-  background-color: var(--bar-bg-color);
-}
-
-.ov-excel-formula-bar__name-box {
-  text-align: center;
-  width: 64px;
-  margin: 4px 0 4px 4px;
-  padding: 0 4px;
-  line-height: 26px;
-  border: 1px solid #e1dfdd;
-  background-color: var(--bar-input-bg-color);
-}
-
-/* fx 按钮 */
-.ov-excel-formula-bar__function-button {
-  width: 30px;
-}
-
-/* fx 按钮右边的输入框 */
-.ov-excel-formula-bar__text-box {
-  margin: 4px;
-  line-height: 26px;
-  border: 1px solid #e1dfdd;
-  flex: 1;
-  padding: 0 4px;
-  background-color: var(--bar-input-bg-color);
-}
-
-/* Excel sheet 标签页 */
-.ov-excel-sheet-tab-bar {
-  height: 32px;
-  line-height: 32px;
-  display: flex;
-  flex-direction: row;
-  background-color: var(--bar-bg-color);
-}
-
-.ov-excel-sheet-tab-bar__nav {
-  display: flex;
-}
-
-.ov-excel-sheet-tab-bar__nav-icon {
-  height: 16px;
-  padding: 4px 4px;
-}
-
-.ov-excel-sheet-tab-bar__nav-icon svg {
-  height: 16px;
-  width: 16px;
-}
-
-.ov-excel-sheet-tab-bar__nav-icon svg path {
-  fill: #b1b1b1;
-}
-
-.ov-excel-sheet-tab-bar__nav-icon--enabled {
-  cursor: pointer;
-}
-
-.ov-excel-sheet-tab-bar__nav-icon--enabled svg path {
-  fill: #000000;
-}
-
-.ov-excel-sheet-tab-bar__menu {
-  position: relative;
-}
-
-.ov-excel-sheet-tab-bar__menu-icon {
-  cursor: pointer;
-  height: 16px;
-  padding: 4px 8px;
-}
-
-.ov-excel-sheet-tab-bar__menu-icon svg {
-  height: 16px;
-  width: 16px;
-}
-
-.ov-excel-sheet-tab-bar__menu-list {
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid rgb(199, 199, 199);
-  box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
-  display: none;
-  position: absolute;
-  bottom: 32px;
-  left: 0;
-  max-height: 400px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: 15;
-  user-select: none;
-}
-
-.ov-excel-sheet-tab-bar__menu-list-item {
-  padding: 4px 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.ov-excel-sheet-tab-bar__menu-list-item:hover {
-  background-color: #e1dfdd;
-}
-
-.ov-excel-sheet-tab-bar__menu-list-item--active {
-  background-color: #e1dfdd;
-}
-
-.ov-excel-sheet-tab-bar__list-container {
-  position: relative;
-  overflow: hidden;
-  flex: 1 1 0;
-  user-select: none;
-}
-
-.ov-excel-sheet-tab-bar__list-container--enable-left-nav::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 30px;
-  background-image: linear-gradient(to right, #dcdcdc, rgba(220, 220, 220, 0.1));
-}
-
-.ov-excel-sheet-tab-bar__list-container--enable-right-nav::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 30px;
-  background-image: linear-gradient(to left, #dcdcdc, rgba(220, 220, 220, 0.1));
-}
-
-.ov-excel-sheet-tab-bar__list {
-  width: 0;
-  display: flex;
-  flex-direction: row;
-}
-
-.ov-excel-sheet-tab-bar__list-tab {
-  display: inline-block;
-  position: relative;
-  padding: 0 8px;
-  font-size: 14px;
-  margin: 4px 4px;
-  border-radius: 4px;
-  line-height: 24px;
-  white-space: nowrap;
-}
-.ov-excel-sheet-tab-bar__list-tab:hover {
-  cursor: pointer;
-  background-color: #e1dfdd;
-}
-
-.ov-excel-sheet-tab-bar__list-tab--active {
-  cursor: default;
-}
-
-.ov-excel-sheet-tab-bar__list-tab--active::before {
-  content: "";
-  position: absolute;
-  display: inline-block;
-  top: 0;
-  bottom: -4px;
-  left: 0;
-  right: 0;
-  color: transparent;
-  border-bottom: 3px solid var(--active-sheet-color);
-  padding-bottom: 5px;
-  width: calc(100% - 18px);
-  margin: auto;
-  transition: width 0.4s cubic-bezier(0.17, 0.17, 0, 1) 0s;
-}
-
-.ov-excel-sheet-tab-bar__status {
-  margin-left: 12px;
-  margin-right: 12px;
-}
-
-.ov-excel-sheet-tab-bar__status-text {
-  margin-right: 16px;
-}
-
-.ov-excel-sheet-tab-bar__zoom-level {
-  display: flex;
-  flex-direction: row;
-  padding: 0 8px;
-}
-
-.ov-excel-sheet-tab-bar__zoom-value {
-  margin: 0 8px;
-}
-
-.ov-excel-sheet-tab-bar__zoom-in,
-.ov-excel-sheet-tab-bar__zoom-out {
-  cursor: pointer;
-}
-
-/* Excel 内容区域，这个包含表头 */
-.ov-excel-content {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-}
-
-/** Excel 数据区域，不包含表头，目前这个区域主要是给 drawing 用 */
-.ov-excel-data {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  user-select: none;
-  z-index: 2;
-}
-
-.ov-excel-canvas {
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.ov-excel-scrollbar-y {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 3;
-}
-
-.ov-excel-scrollbar-x {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 3;
-}
-
-.ov-excel-scrollbar-content-x {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.ov-excel-scrollbar-content-y {
-  overflow-x: hidden;
-}
-
-/** 缩放的控制界面 */
-.ov-excel-resize-box {
-  position: absolute;
-  border: 1px solid #4af;
-  z-index: 3;
-}
-
-.ov-excel-resize-box-control {
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 2px solid #fff;
-  box-sizing: border-box;
-  background: #4af;
-  border: 2px solid #fff;
-  z-index: 5;
-}
-
-.ov-excel-auto-filter-icon-container {
-  position: absolute;
-}
-
-.ov-excel-auto-filter-icon {
-  cursor: pointer;
-  position: absolute;
-  right: 2px;
-  top: 2px;
-  bottom: 2px;
-  z-index: 3;
-}
-
-.ov-excel-auto-filter-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.ov-excel-auto-filter-menu {
-  position: absolute;
-  display: none;
-  flex-direction: column;
-  right: -240px;
-  width: 240px;
-  height: 440px;
-  border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
-  z-index: 4;
-  background-color: white;
-}
-
-.excel-auto-filter__menu-sort {
-  display: flex;
-  flex-direction: row;
-  column-gap: 4px;
-  padding: 8px;
-}
-
-.ov-excel-auto-filter__sort-button {
-  cursor: pointer;
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  line-height: 24px;
-  height: 24px;
-  padding: 2px;
-}
-
-.ov-excel-auto-filter__sort-button-text {
-  flex: 1;
-}
-
-.ov-excel-auto-filter__sort-button-icon {
-  height: 24px;
-  width: 24px;
-}
-
-.ov-excel-auto-filter__sort-button-icon svg {
-  height: 100%;
-  width: 100%;
-}
-
-.ov-excel-auto-filter__sort-button:hover {
-  background-color: #f5f5f5;
-}
-
-.ov-excel-auto-filter__sort-button-active {
-  background-color: #f5f5f5;
-}
-
-.ov-excel-auto-filter__menu-filter-filters {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.ov-excel-auto-filter__menu-filter-filters .excel-checkbox-list-wrapper {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  padding: 8px;
-  min-height: 0;
-}
-
-.ov-excel-auto-filter__menu-filter-filters .excel-checkbox-list {
-  flex-grow: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.ov-excel-auto-filter-menu__custom-filters {
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-}
-
-/** 单个规则 */
-.ov-excel-auto-filter-menu__custom-filters-item-input {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 4px;
-}
-
-.ov-excel-auto-filter-menu__custom-filters-item-input > select {
-  margin-right: 4px;
-}
-
-.ov-excel-auto-filter-menu__custom-filters .excel-radio-wrapper {
-  margin: 4px 0;
-  text-align: center;
-}
-
-.excel-cell-editor {
-  position: absolute;
-}
-
-.excel-chart {
-  position: absolute;
-  z-index: 10;
-}
-
-.excel-pic {
-  position: absolute;
-  z-index: 10;
-  overflow: hidden;
-}
-
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"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"}