@work-zhanguo/light-file-preview 0.0.7 → 0.0.8

package/README.md

@@ -8,10 +8,11 @@
 
 用于业务系统里的附件预览，支持传入文件路径、远程地址和本地文件，接入方式尽量保持简单。
 
-当前版本：`0.0.7`
+当前版本：`0.0.8`
 
 最近更新：
 
+- `0.0.8`：优化 `xlsx` 预览，补充工作表页签、首行首列编号区、冻结观感、单元格 hover / 选中高亮，并补充组件属性说明
 - `0.0.7`：修复 Vue2 `vue-cli / webpack4` 项目引入 PDF 预览时报 `import.meta.url`、`process.getBuiltinModule` 解析错误
 - `0.0.6`：修复 Vue2 `vue-cli / webpack4` 项目解析产物时报 `Unexpected token`，降低构建目标到 `es2018`
 - `0.0.5`：修复 Vue2 `vue-cli / webpack4` 项目子路径入口解析失败，补充 `vue2.js` 和 `style.css` 兼容入口
@@ -81,6 +82,28 @@ import LightFilePreview from '@work-zhanguo/light-file-preview/vue2';
 import '@work-zhanguo/light-file-preview/style.css';
 ```
 
+## 组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `source` | `string \| File \| Blob` | - | 必填。支持远程 URL、本地 `File`、`Blob`。 |
+| `fileName` | `string` | - | 自定义文件名，远程地址没有扩展名时建议传。 |
+| `mode` | `'inline' \| 'dialog'` | `'inline'` | 直接预览或弹窗预览。 |
+| `visible` | `boolean` | `true` | 弹窗模式下控制显示状态，可配合 `v-model:visible`。 |
+| `loadingText` | `string` | `'文件加载中...'` | 加载提示文案。 |
+| `textEncoding` | `string` | `'utf-8'` | 文本类文件读取编码。 |
+| `maxTextBytes` | `number` | `2097152` | 文本预览最大读取字节数，默认 2MB。 |
+| `maxSheetRows` | `number` | `200` | 表格预览最大展示行数。 |
+| `maxSheetCols` | `number` | `50` | 表格预览最大展示列数。 |
+| `pdfScale` | `number` | `1.35` | PDF 渲染缩放比例。 |
+| `showToolbar` | `boolean` | `true` | 是否显示顶部工具栏。 |
+| `dialogTitle` | `string` | `'文件预览'` | 预览标题兜底文案。 |
+
+组件事件：
+
+- `update:visible`：弹窗关闭时回传状态
+- `error`：解析失败时返回错误对象
+
 ## 远程地址预览
 
 通过 `window.open` 传入网络地址，直接打开新页面预览。建议同时传 `name`，这样扩展名识别更稳定。

package/dist/SheetRenderer-Dea6-NBg.js

@@ -0,0 +1,315 @@
+import { defineComponent as xe, ref as C, computed as Se, onMounted as $e, onBeforeUnmount as Re, openBlock as u, createElementBlock as c, createElementVNode as p, Fragment as I, renderList as N, normalizeClass as x, toDisplayString as v, createCommentVNode as W, createTextVNode as ne, normalizeStyle as le } from "vue";
+import { r as ke } from "./text-Bqxn_tMI.js";
+const Ve = { class: "lfp-document lfp-sheet" }, Ie = { class: "lfp-sheet__toolbar" }, Ne = {
+  key: 0,
+  class: "lfp-sheet__tabs",
+  role: "tablist",
+  "aria-label": "工作表切换"
+}, De = ["onClick"], Fe = { class: "lfp-sheet__tab-label" }, ze = { class: "lfp-sheet__tab-meta" }, Be = {
+  key: 1,
+  class: "lfp-sheet__summary"
+}, Ae = { class: "lfp-sheet__summary-item" }, We = { class: "lfp-sheet__summary-item" }, Te = {
+  key: 0,
+  class: "lfp-hint"
+}, Ee = {
+  key: 1,
+  class: "lfp-sheet__table-wrap"
+}, je = { class: "lfp-sheet__table" }, He = { class: "lfp-sheet__header-row" }, Ke = ["rowspan", "colspan", "onMouseenter", "onFocus", "onClick"], Le = { class: "lfp-sheet__cell-text" }, Me = {
+  key: 2,
+  class: "lfp-sheet__empty"
+}, qe = /* @__PURE__ */ xe({
+  __name: "SheetRenderer",
+  props: {
+    source: {},
+    maxRows: {},
+    maxCols: {}
+  },
+  emits: ["loading", "error"],
+  setup(re, { emit: ie }) {
+    const D = re, F = ie, T = new AbortController(), S = C(0), $ = C([]), m = C(""), z = C(null), B = C(null), i = Se(() => $.value[S.value]);
+    function ae(e) {
+      let o = e + 1, s = "";
+      for (; o > 0; ) {
+        const t = (o - 1) % 26;
+        s = String.fromCharCode(65 + t) + s, o = Math.floor((o - 1) / 26);
+      }
+      return s;
+    }
+    function y(e, o) {
+      z.value = e, B.value = o;
+    }
+    function ue(e) {
+      m.value = e;
+    }
+    function E(e, o) {
+      return e != null && (e === z.value || e === j()) || o != null && (o === B.value || o === H());
+    }
+    function j() {
+      if (!m.value)
+        return null;
+      const [e] = m.value.split(":");
+      return Number.isFinite(Number(e)) ? Number(e) : null;
+    }
+    function H() {
+      if (!m.value)
+        return null;
+      const [, e] = m.value.split(":");
+      return Number.isFinite(Number(e)) ? Number(e) : null;
+    }
+    function ce(e) {
+      if (e) {
+        if (["thin", "hair"].includes(e) || ["medium", "dashed", "dotted", "dashDot", "dashDotDot"].includes(e))
+          return "1px solid";
+        if (["thick", "double", "mediumDashed", "mediumDashDot", "mediumDashDotDot"].includes(e))
+          return "2px solid";
+      }
+    }
+    function R(e, o, s) {
+      var n;
+      if (!s)
+        return;
+      const t = ce(s.style), l = (n = k(s.color)) != null ? n : "rgba(31, 44, 61, 0.12)";
+      t && (o === "left" ? e.borderLeft = `${t} ${l}` : o === "right" ? e.borderRight = `${t} ${l}` : o === "top" ? e.borderTop = `${t} ${l}` : o === "bottom" && (e.borderBottom = `${t} ${l}`));
+    }
+    function k(e) {
+      if (!e || typeof e != "object")
+        return;
+      const o = "rgb" in e && typeof e.rgb == "string" ? e.rgb : "argb" in e && typeof e.argb == "string" ? e.argb : void 0;
+      if (!o)
+        return;
+      const s = o.replace(/^#/, "");
+      if (/^[0-9a-fA-F]{8}$/.test(s))
+        return `#${s.slice(2)}`;
+      if (/^[0-9a-fA-F]{6}$/.test(s))
+        return `#${s}`;
+    }
+    function fe(e) {
+      if (!e)
+        return;
+      const o = typeof e.hpx == "number" ? e.hpx : typeof e.hpt == "number" ? e.hpt * 1.3334 : void 0;
+      return o ? { height: `${Math.max(o, 24)}px` } : void 0;
+    }
+    function K(e) {
+      if (e) {
+        if (typeof e.wpx == "number")
+          return `${Math.max(e.wpx, 72)}px`;
+        if (typeof e.width == "number")
+          return `${Math.max(e.width * 8, 72)}px`;
+      }
+    }
+    function de(e) {
+      if (!e)
+        return {};
+      const o = {};
+      return e.horizontal && (o.textAlign = e.horizontal), e.vertical && (o.verticalAlign = e.vertical === "center" ? "middle" : e.vertical), e.wrapText && (o.whiteSpace = "pre-wrap", o.wordBreak = "break-word"), o;
+    }
+    function pe(e, o, s) {
+      var d;
+      const t = {};
+      if (s ? t.minWidth = s : o && (t.minWidth = o, t.width = o), !(e != null && e.s) || typeof e.s != "object")
+        return t;
+      const l = e.s.fill, n = e.s.font, r = e.s.border, f = (d = k(l == null ? void 0 : l.fgColor)) != null ? d : k(l == null ? void 0 : l.bgColor), h = k(n == null ? void 0 : n.color);
+      return f && (l == null ? void 0 : l.patternType) !== "none" && (t.backgroundColor = f), h && (t.color = h), n != null && n.bold && (t.fontWeight = "600"), n != null && n.italic && (t.fontStyle = "italic"), n != null && n.underline && (t.textDecoration = "underline"), typeof (n == null ? void 0 : n.sz) == "number" && (t.fontSize = `${n.sz}px`), typeof (n == null ? void 0 : n.name) == "string" && n.name.trim() && (t.fontFamily = n.name), Object.assign(t, de(e.s.alignment)), R(t, "left", r == null ? void 0 : r.left), R(t, "right", r == null ? void 0 : r.right), R(t, "top", r == null ? void 0 : r.top), R(t, "bottom", r == null ? void 0 : r.bottom), t;
+    }
+    function ve(e, o) {
+      var s, t;
+      return o ? typeof o.w == "string" ? o.w : (s = e.utils) != null && s.format_cell ? String(e.utils.format_cell(o, (t = o.v) != null ? t : "")) : o.v == null ? "" : String(o.v) : "";
+    }
+    function he(e, o, s) {
+      const t = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
+      for (const n of e) {
+        const r = o.filter((d) => d >= n.s.r && d <= n.e.r), f = s.filter((d) => d >= n.s.c && d <= n.e.c);
+        if (!r.length || !f.length)
+          continue;
+        const h = `${n.s.r}:${n.s.c}`;
+        l.set(h, {
+          rowSpan: r.length,
+          colSpan: f.length,
+          colsInRange: f
+        });
+        for (const d of r)
+          for (const V of f)
+            d === n.s.r && V === n.s.c || t.add(`${d}:${V}`);
+      }
+      return { coveredCells: t, mergeStarts: l };
+    }
+    function be(e, o, s) {
+      var L, M, O, U, q, G, J;
+      const t = s["!ref"];
+      if (!t)
+        return {
+          name: o,
+          rows: [],
+          totalRows: 0,
+          totalCols: 0,
+          visibleRows: 0,
+          visibleCols: 0,
+          visibleRowIndexes: [],
+          visibleColIndexes: [],
+          firstVisibleRow: 0,
+          firstVisibleCol: 0
+        };
+      const l = e.utils.decode_range(t), n = [], r = [];
+      for (let a = l.s.r; a <= l.e.r; a += 1)
+        (M = (L = s["!rows"]) == null ? void 0 : L[a]) != null && M.hidden || n.push(a);
+      for (let a = l.s.c; a <= l.e.c; a += 1)
+        (U = (O = s["!cols"]) == null ? void 0 : O[a]) != null && U.hidden || r.push(a);
+      const f = n.slice(0, D.maxRows), h = r.slice(0, D.maxCols), d = (q = s["!merges"]) != null ? q : [], { coveredCells: V, mergeStarts: _e } = he(d, f, h), ye = f.map((a) => {
+        var Q, Y, Z, X, ee;
+        const ge = (Q = s["!rows"]) == null ? void 0 : Q[a], we = fe(ge), P = [];
+        for (const g of h) {
+          const A = `${a}:${g}`;
+          if (V.has(A))
+            continue;
+          const Ce = e.utils.encode_cell({ r: a, c: g }), te = s[Ce], b = _e.get(A), oe = ((Y = b == null ? void 0 : b.colsInRange) != null ? Y : [g]).map((_) => {
+            var w;
+            return K((w = s["!cols"]) == null ? void 0 : w[_]);
+          }).filter(Boolean).reduce((_, w) => {
+            if (!w)
+              return _;
+            const se = Number.parseFloat(w);
+            return Number.isFinite(se) ? (_ != null ? _ : 0) + se : _;
+          }, null);
+          P.push({
+            key: A,
+            value: ve(e, te),
+            rowIndex: a,
+            colIndex: g,
+            rowSpan: (Z = b == null ? void 0 : b.rowSpan) != null ? Z : 1,
+            colSpan: (X = b == null ? void 0 : b.colSpan) != null ? X : 1,
+            style: pe(
+              te,
+              K((ee = s["!cols"]) == null ? void 0 : ee[g]),
+              oe ? `${oe}px` : void 0
+            )
+          });
+        }
+        return {
+          key: `${o}-${a}`,
+          rowIndex: a,
+          cells: P,
+          style: we
+        };
+      });
+      return {
+        name: o,
+        rows: ye,
+        totalRows: n.length,
+        totalCols: r.length,
+        visibleRows: f.length,
+        visibleCols: h.length,
+        visibleRowIndexes: f,
+        visibleColIndexes: h,
+        firstVisibleRow: (G = f[0]) != null ? G : 0,
+        firstVisibleCol: (J = h[0]) != null ? J : 0
+      };
+    }
+    async function me() {
+      F("loading", !0);
+      try {
+        const e = await ke(D.source, T.signal), o = await import("./xlsx-j9Zzywas.js"), s = o.read(e, {
+          type: "array",
+          cellStyles: !0,
+          cellNF: !0,
+          cellText: !0
+        });
+        $.value = s.SheetNames.map(
+          (t) => be(o, t, s.Sheets[t])
+        ), S.value = 0, m.value = "", y(null, null);
+      } catch (e) {
+        F("error", e instanceof Error ? e : new Error("表格预览失败"));
+      } finally {
+        F("loading", !1);
+      }
+    }
+    return $e(() => {
+      me();
+    }), Re(() => {
+      T.abort();
+    }), (e, o) => (u(), c("div", Ve, [
+      p("div", Ie, [
+        $.value.length > 1 ? (u(), c("div", Ne, [
+          (u(!0), c(I, null, N($.value, (s, t) => (u(), c("button", {
+            key: s.name,
+            class: x(["lfp-sheet__tab", { "is-active": t === S.value }]),
+            type: "button",
+            onClick: (l) => S.value = t
+          }, [
+            p("span", Fe, v(s.name), 1),
+            p("span", ze, v(s.totalRows) + " × " + v(s.totalCols), 1)
+          ], 10, De))), 128))
+        ])) : W("", !0),
+        i.value ? (u(), c("div", Be, [
+          p("span", Ae, [
+            o[2] || (o[2] = ne(" 当前工作表 ", -1)),
+            p("strong", null, v(i.value.name), 1)
+          ]),
+          p("span", We, [
+            o[3] || (o[3] = ne(" 总览 ", -1)),
+            p("strong", null, v(i.value.totalRows) + " 行 / " + v(i.value.totalCols) + " 列", 1)
+          ])
+        ])) : W("", !0)
+      ]),
+      i.value ? (u(), c("p", Te, " 共 " + v(i.value.totalRows) + " 行，" + v(i.value.totalCols) + " 列。当前展示 " + v(i.value.visibleRows) + " 行、" + v(i.value.visibleCols) + " 列。 ", 1)) : W("", !0),
+      i.value ? (u(), c("div", Ee, [
+        p("table", je, [
+          p("tbody", null, [
+            p("tr", He, [
+              o[4] || (o[4] = p("th", {
+                class: "lfp-sheet__corner-header",
+                scope: "col",
+                "aria-label": "表格左上角"
+              }, null, -1)),
+              (u(!0), c(I, null, N(i.value.visibleColIndexes, (s) => (u(), c("th", {
+                key: `col-header-${s}`,
+                class: x(["lfp-sheet__col-header", {
+                  "is-first-data-col": s === i.value.firstVisibleCol,
+                  "is-related": E(null, s)
+                }]),
+                scope: "col"
+              }, v(ae(s)), 3))), 128))
+            ]),
+            (u(!0), c(I, null, N(i.value.rows, (s) => (u(), c("tr", {
+              key: s.key,
+              class: x(["lfp-sheet__row", { "is-first-row": s.rowIndex === i.value.firstVisibleRow }]),
+              style: le(s.style)
+            }, [
+              p("th", {
+                class: x(["lfp-sheet__row-header", {
+                  "is-first-data-row": s.rowIndex === i.value.firstVisibleRow,
+                  "is-related": E(s.rowIndex, null)
+                }]),
+                scope: "row"
+              }, v(s.rowIndex + 1), 3),
+              (u(!0), c(I, null, N(s.cells, (t) => (u(), c("td", {
+                key: t.key,
+                class: x({
+                  "is-first-row": t.rowIndex === i.value.firstVisibleRow,
+                  "is-first-col": t.colIndex === i.value.firstVisibleCol,
+                  "is-corner-cell": t.rowIndex === i.value.firstVisibleRow && t.colIndex === i.value.firstVisibleCol,
+                  "is-selected": m.value === t.key,
+                  "is-row-active": z.value === t.rowIndex || j() === t.rowIndex,
+                  "is-col-active": B.value === t.colIndex || H() === t.colIndex
+                }),
+                rowspan: t.rowSpan,
+                colspan: t.colSpan,
+                style: le(t.style),
+                tabindex: "0",
+                onMouseenter: (l) => y(t.rowIndex, t.colIndex),
+                onMouseleave: o[0] || (o[0] = (l) => y(null, null)),
+                onFocus: (l) => y(t.rowIndex, t.colIndex),
+                onBlur: o[1] || (o[1] = (l) => y(null, null)),
+                onClick: (l) => ue(t.key)
+              }, [
+                p("span", Le, v(t.value), 1)
+              ], 46, Ke))), 128))
+            ], 6))), 128))
+          ])
+        ])
+      ])) : (u(), c("p", Me, "当前工作表没有可展示的数据。"))
+    ]));
+  }
+});
+export {
+  qe as default
+};

package/dist/{UnsupportedRenderer-8vWx7yB8.js → UnsupportedRenderer-DDB3UZdt.js}

@@ -1,5 +1,5 @@
 import { defineComponent as o, openBlock as l, createElementBlock as a, createElementVNode as t, toDisplayString as i, unref as r } from "vue";
-import { d as s } from "./index-BNN8UXSN.js";
+import { d as s } from "./index-B8Ff5iZD.js";
 const d = { class: "lfp-empty" }, p = { class: "lfp-hint" }, c = /* @__PURE__ */ o({
   __name: "UnsupportedRenderer",
   props: {

package/dist/{index-BNN8UXSN.js → index-B8Ff5iZD.js}

@@ -77,7 +77,7 @@ const ee = ["aria-modal"], te = {
   },
   emits: ["update:visible", "error"],
   setup(e, { emit: t }) {
-    const o = h(() => import("./PdfRenderer-Due2M5cA.js")), c = h(() => import("./TextRenderer-KUhpnf63.js")), i = h(() => import("./DocxRenderer-DogNhBLd.js")), p = h(() => import("./SheetRenderer-D4Y1dYZX.js")), d = h(() => import("./UnsupportedRenderer-8vWx7yB8.js")), l = e, D = t, f = U(null), j = U(!1), L = U(""), n = U(I(l.source, l.fileName)), m = w(() => Q(n.value.name)), N = w(() => l.fileName || n.value.name || l.dialogTitle), b = w(() => l.mode === "dialog"), O = w(() => b.value ? l.visible : !0), T = w(() => m.value === "image" ? "img" : m.value === "video" ? "video" : m.value === "audio" ? "audio" : null);
+    const o = h(() => import("./PdfRenderer-Due2M5cA.js")), c = h(() => import("./TextRenderer-KUhpnf63.js")), i = h(() => import("./DocxRenderer-DogNhBLd.js")), p = h(() => import("./SheetRenderer-Dea6-NBg.js")), d = h(() => import("./UnsupportedRenderer-DDB3UZdt.js")), l = e, D = t, f = U(null), j = U(!1), L = U(""), n = U(I(l.source, l.fileName)), m = w(() => Q(n.value.name)), N = w(() => l.fileName || n.value.name || l.dialogTitle), b = w(() => l.mode === "dialog"), O = w(() => b.value ? l.visible : !0), T = w(() => m.value === "image" ? "img" : m.value === "video" ? "video" : m.value === "audio" ? "audio" : null);
     Z(
       () => [l.source, l.fileName],
       () => {

package/dist/light-file-preview.js

@@ -1,4 +1,4 @@
-import { _ as i, i as r, o, r as l } from "./index-BNN8UXSN.js";
+import { _ as i, i as r, o, r as l } from "./index-B8Ff5iZD.js";
 export {
   i as FilePreview,
   r as default,