@work-zhanguo/light-file-preview 0.0.12 → 0.0.14

package/README.md

@@ -1,43 +1,72 @@
-# @work-zhanguo/light-file-preview
+<h1 align="center">轻量预览 Light Preview</h1>
 
-# Gitee: [https://gitee.com/hou_zhan_guo/light-file-preview](https://gitee.com/hou_zhan_guo/light-file-preview)
+<p align="center">
+  用于业务系统里的附件预览，支持远程 URL、本地 File、Blob，接入方式尽量保持简单。
+</p>
 
-# npm：[https://www.npmjs.com/package/@work-zhanguo/light-file-preview](https://www.npmjs.com/package/@work-zhanguo/light-file-preview)
+<p align="center">
+  <a href="https://gitee.com/hou_zhan_guo/light-file-preview" target="_blank" rel="noreferrer">Gitee</a>
+  ·
+  <a href="https://www.npmjs.com/package/@work-zhanguo/light-file-preview" target="_blank" rel="noreferrer">npm</a>
+</p>
 
 ## 项目简介
 
-用于业务系统里的附件预览，支持传入文件路径、远程地址和本地文件，接入方式尽量保持简单。
-
-当前版本：`0.0.12`
+- 当前版本：`0.0.14`
+- 适用场景：业务系统附件预览、在线查看、弹窗预览、新页面预览
+- 支持 Vue 3、Vue 2 适配入口，以及非 Vue 项目的 standalone 产物
 
 最近更新：
 
+- `0.0.14`：优化 `xlsx` 空白区域填充，移除未声明的表头/首列固定效果，并为 `PDF`、`DOCX` 增加默认分页与全部展示切换
+- `0.0.13`：修复弹窗失败后同文件无法重试、运行时配置更新不生效的问题，补充 README 示例图与发包说明
 - `0.0.12`：修复 `xlsx` 部分单元格背景色、文字颜色和边框颜色未正确展示的问题，补充 `theme / tint / indexed` 颜色解析
 - `0.0.11`：修复 `xlsx` 图片拉伸和底色覆盖问题，优化单元格内容的对齐、换行和数值展示
-- `0.0.10`：优化 `xlsx` 预览密度，降低默认列宽和行高，减少横向滚动距离，整体样式更接近 Office
-- `0.0.9`：优化 `xlsx` 图片锚点尺寸和裁切边界，补充更接近 Excel 的公式栏名字框与编辑条样式
-- `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` 兼容入口
-- `0.0.4`：修复 Vue2 项目安装时的 `ERESOLVE` 依赖冲突，兼容 `Vue 2.6+` 和 `Vue 3.5+`
-- `0.0.3`：发布 `@work-zhanguo/light-file-preview`，补充文档与站点构建说明
 
-详细版本记录见 [CHANGELOG.md](./CHANGELOG.md)
+详细版本记录见 [CHANGELOG.md](./CHANGELOG.md)。
+
+## 效果预览
+
+仓库里的原始截图在 `public/screenshots/` 目录。
+
+下面的示例图使用 npm CDN 地址。当前仓库修改不会立即影响已发布版本；发布包含截图的新版本后，npm 页面会直接显示这些图片。
+
+### DOCX
+
+![DOCX 预览效果](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-docx.png)
+
+### XLSX
+
+![XLSX 预览效果](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-xlsx.png)
+
+### PDF
+
+![PDF 预览效果](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-pdf.png)
+
+### PPTX 降级展示
+
+当前 `PPT` / `PPTX` 不做在线解析，组件会保留下载入口，不会伪装成已支持的在线预览。
+
+![PPTX 降级效果](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-pptx.png)
 
 ## 支持文件
 
-支持类型：
+在线预览支持：
 
 - `PNG`
 - `JPG`
 - `JPEG`
 - `GIF`
 - `WEBP`
+- `BMP`
+- `SVG`
 - `PDF`
 - `TXT`
 - `JSON`
 - `JS`
+- `TS`
+- `JSX`
+- `TSX`
 - `HTML`
 - `CSS`
 - `MD`
@@ -50,10 +79,17 @@
 - `MP3`
 - `WAV`
 
+降级为下载入口：
+
+- `DOC`
+- `PPT`
+- `PPTX`
+- 其他未识别格式
+
 补充说明：
 
 - 支持远程 `URL`、本地 `File`、`Blob`
-- 支持新页面预览和弹窗预览
+- 支持直接嵌入和弹窗预览
 - 不支持的格式不强行预览，统一保留下载入口
 
 ## 项目依赖
@@ -66,26 +102,10 @@
 
 ## 安装
 
-安装组件：
-
 ```bash
 npm install @work-zhanguo/light-file-preview
 ```
 
-如果是 `Vue3` 项目，注册入口：
-
-```ts
-import LightFilePreview from '@work-zhanguo/light-file-preview';
-import '@work-zhanguo/light-file-preview/style.css';
-```
-
-如果是 `Vue2` 项目，注册入口：
-
-```js
-import LightFilePreview from '@work-zhanguo/light-file-preview/vue2';
-import '@work-zhanguo/light-file-preview/style.css';
-```
-
 ## 组件属性
 
 | 属性 | 类型 | 默认值 | 说明 |
@@ -108,9 +128,62 @@ import '@work-zhanguo/light-file-preview/style.css';
 - `update:visible`：弹窗关闭时回传状态
 - `error`：解析失败时返回错误对象
 
-## 远程地址预览
+## Vue 3 集成
 
-通过 `window.open` 传入网络地址，直接打开新页面预览。建议同时传 `name`，这样扩展名识别更稳定。
+```ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import LightFilePreview from '@work-zhanguo/light-file-preview';
+import '@work-zhanguo/light-file-preview/style.css';
+
+createApp(App).use(LightFilePreview).mount('#app');
+```
+
+```vue
+<template>
+  <LightFilePreview source="/files/demo.pdf" />
+</template>
+```
+
+## Vue 2 集成
+
+```js
+import Vue from 'vue';
+import LightFilePreview from '@work-zhanguo/light-file-preview/vue2';
+import '@work-zhanguo/light-file-preview/style.css';
+
+Vue.use(LightFilePreview);
+```
+
+```vue
+<template>
+  <light-file-preview :source="fileUrl" />
+</template>
+```
+
+## 弹窗预览
+
+```vue
+<template>
+  <button @click="show = true">打开弹窗预览</button>
+
+  <LightFilePreview
+    v-model:visible="show"
+    source="https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx"
+    mode="dialog"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const show = ref(false);
+</script>
+```
+
+## 新页面预览
+
+建议同时传 `name`，这样扩展名识别更稳定。
 
 ```js
 const remoteUrl = 'https://example.com/files/test.docx';
@@ -127,6 +200,11 @@ window.open(previewUrl, '_blank');
 
 非 Vue 项目可以直接使用 standalone 产物。
 
+如果你是从 npm 包里复制静态文件，建议复制下面两个文件：
+
+- `dist/standalone/light-file-preview.iife.js`
+- `dist/standalone/style.css`
+
 ```html
 <link rel="stylesheet" href="/vendor/light-file-preview/style.css" />
 <div id="preview-root"></div>
@@ -171,55 +249,19 @@ FilePreviewBlock.template = 'your_module.FilePreviewBlock';
 </templates>
 ```
 
-## Vue2 集成
-
-通过单独适配入口接入：
-
-```js
-import Vue from 'vue';
-import LightFilePreview from '@work-zhanguo/light-file-preview/vue2';
-import '@work-zhanguo/light-file-preview/style.css';
-
-Vue.use(LightFilePreview);
-```
-
-```vue
-<template>
-  <light-file-preview :source="fileUrl" />
-</template>
-```
-
-## Vue3 集成
-
-```ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import LightFilePreview from '@work-zhanguo/light-file-preview';
-import '@work-zhanguo/light-file-preview/style.css';
-
-createApp(App).use(LightFilePreview).mount('#app');
-```
-
-```vue
-<template>
-  <LightFilePreview source="/files/demo.pdf" />
-</template>
-```
-
 ## 部署说明
 
-直接复制打包产物：
+组件库打包：
 
 ```bash
 npm install
 npm run build
+```
 
-# 组件库产物
-dist/
+产物目录：
 
-# 可复制到任意项目的独立产物
-dist/standalone/
-```
+- `dist/`
+- `dist/standalone/`
 
 如果要把首页演示页和文档页一起部署成静态站点，执行：
 
@@ -229,18 +271,4 @@ npm run build:site
 
 站点部署目录：
 
-```bash
-dist-site/
-```
-
-其中会包含：
-
-- `dist-site/index.html`
-- `dist-site/docs.html`
-
-## 接入说明
-
-- 本地上传文件只在当前浏览器中预览，不会保存到服务器
-- 如果是远程文件预览，需要目标地址允许浏览器访问和跨域读取
-- 弹窗预览会挂到 `body`
-- 不支持的文件格式会保留下载入口
+- `dist-site/`

package/dist/DocxRenderer-Cck1uOjU.js

@@ -0,0 +1,110 @@
+import { defineComponent as P, ref as i, computed as L, watch as _, onMounted as N, onBeforeUnmount as T, openBlock as p, createElementBlock as d, createElementVNode as n, toDisplayString as v, normalizeClass as b, Fragment as B, createCommentVNode as m } from "vue";
+import { r as D } from "./text-Bqxn_tMI.js";
+const R = { class: "lfp-document" }, $ = {
+  key: 0,
+  class: "lfp-page-toolbar"
+}, H = { class: "lfp-page-toolbar__meta" }, S = { class: "lfp-page-toolbar__status" }, V = { class: "lfp-page-toolbar__actions" }, A = ["disabled"], O = { class: "lfp-page-toolbar__pager" }, U = ["disabled"], z = /* @__PURE__ */ P({
+  __name: "DocxRenderer",
+  props: {
+    source: {}
+  },
+  emits: ["loading", "error"],
+  setup(h, { emit: y }) {
+    const x = h, u = y, l = i(null), o = i(0), a = i(1), s = i("paged"), f = new AbortController(), C = L(() => o.value ? s.value === "paged" ? `第 ${a.value} / ${o.value} 页` : `共 ${o.value} 页` : "");
+    function w() {
+      if (!l.value)
+        return [];
+      const t = l.value.querySelector(".docx-wrapper");
+      if (!t)
+        return [];
+      const e = Array.from(t.children).filter(
+        (r) => r instanceof HTMLElement && (r.tagName === "SECTION" || r.classList.contains("docx"))
+      );
+      return e.length ? e : [t];
+    }
+    function c() {
+      const t = w();
+      o.value = t.length || 1, a.value = Math.min(Math.max(a.value, 1), o.value), t.forEach((e, r) => {
+        e.classList.add("lfp-docx-page"), e.dataset.page = String(r + 1), e.hidden = s.value === "paged" && r !== a.value - 1;
+      });
+    }
+    function g(t) {
+      s.value = t;
+    }
+    function M() {
+      a.value = Math.max(a.value - 1, 1);
+    }
+    function k() {
+      a.value = Math.min(a.value + 1, o.value);
+    }
+    async function E() {
+      u("loading", !0);
+      try {
+        const t = await D(x.source, f.signal), { renderAsync: e } = await import("./docx-preview-BV-bQyiM.js");
+        if (!l.value)
+          return;
+        l.value.innerHTML = "", await e(t, l.value, void 0, {
+          className: "lfp-docx-content",
+          ignoreWidth: !1,
+          ignoreHeight: !1,
+          useBase64URL: !0
+        }), c();
+      } catch (t) {
+        u("error", t instanceof Error ? t : new Error("DOCX 预览失败"));
+      } finally {
+        u("loading", !1);
+      }
+    }
+    return _(s, () => {
+      c();
+    }), _(a, () => {
+      s.value === "paged" && c();
+    }), N(() => {
+      E();
+    }), T(() => {
+      f.abort(), l.value && (l.value.innerHTML = "");
+    }), (t, e) => (p(), d("div", R, [
+      o.value ? (p(), d("div", $, [
+        n("div", H, [
+          e[2] || (e[2] = n("span", { class: "lfp-page-toolbar__title" }, "Word 视图", -1)),
+          n("span", S, v(C.value), 1)
+        ]),
+        n("div", V, [
+          n("button", {
+            class: b(["lfp-button is-ghost lfp-page-toolbar__toggle", { "is-active": s.value === "paged" }]),
+            type: "button",
+            onClick: e[0] || (e[0] = (r) => g("paged"))
+          }, " 分页 ", 2),
+          n("button", {
+            class: b(["lfp-button is-ghost lfp-page-toolbar__toggle", { "is-active": s.value === "all" }]),
+            type: "button",
+            onClick: e[1] || (e[1] = (r) => g("all"))
+          }, " 全部 ", 2),
+          s.value === "paged" && o.value > 1 ? (p(), d(B, { key: 0 }, [
+            n("button", {
+              class: "lfp-button is-ghost lfp-page-toolbar__nav",
+              type: "button",
+              disabled: a.value <= 1,
+              onClick: M
+            }, " 上一页 ", 8, A),
+            n("span", O, v(a.value) + " / " + v(o.value), 1),
+            n("button", {
+              class: "lfp-button is-ghost lfp-page-toolbar__nav",
+              type: "button",
+              disabled: a.value >= o.value,
+              onClick: k
+            }, " 下一页 ", 8, U)
+          ], 64)) : m("", !0)
+        ])
+      ])) : m("", !0),
+      n("div", {
+        ref_key: "containerRef",
+        ref: l,
+        class: "lfp-docx"
+      }, null, 512)
+    ]));
+  }
+});
+export {
+  z as default
+};