@work-zhanguo/light-file-preview 0.0.13 → 0.0.15

package/README.md

@@ -1,7 +1,9 @@
 <h1 align="center">轻量预览 Light Preview</h1>
 
 <p align="center">
-  用于业务系统里的附件预览，支持远程 URL、本地 File、Blob，接入方式尽量保持简单。
+  Lightweight file preview component for Vue 3, Vue 2, and standalone usage.
+  <br />
+  用于业务系统附件预览的轻量级文件预览组件，支持 Vue 3、Vue 2 与独立产物嵌入。
 </p>
 
 <p align="center">
@@ -10,17 +12,27 @@
   <a href="https://www.npmjs.com/package/@work-zhanguo/light-file-preview" target="_blank" rel="noreferrer">npm</a>
 </p>
 
+<p align="center">
+  <strong>Language</strong>: expand the section you want to read.
+  <br />
+  <strong>语言切换</strong>：展开你想查看的语言版本即可。
+</p>
+
+<details open>
+<summary><strong>简体中文</strong></summary>
+
 ## 项目简介
 
-- 当前版本：`0.0.13`
+- 当前版本：`0.0.15`
 - 适用场景：业务系统附件预览、在线查看、弹窗预览、新页面预览
 - 支持 Vue 3、Vue 2 适配入口，以及非 Vue 项目的 standalone 产物
 
 最近更新：
 
+- `0.0.15`：新增 npm `README.md` 的中英文双版本折叠切换展示，同步调整包描述与文档版本信息
+- `0.0.14`：优化 `xlsx` 空白区域填充，移除未声明的表头/首列固定效果，并为 `PDF`、`DOCX` 增加默认分页与全部展示切换
 - `0.0.13`：修复弹窗失败后同文件无法重试、运行时配置更新不生效的问题，补充 README 示例图与发包说明
 - `0.0.12`：修复 `xlsx` 部分单元格背景色、文字颜色和边框颜色未正确展示的问题，补充 `theme / tint / indexed` 颜色解析
-- `0.0.11`：修复 `xlsx` 图片拉伸和底色覆盖问题，优化单元格内容的对齐、换行和数值展示
 
 详细版本记录见 [CHANGELOG.md](./CHANGELOG.md)。
 
@@ -271,3 +283,273 @@ npm run build:site
 站点部署目录：
 
 - `dist-site/`
+
+</details>
+
+<details>
+<summary><strong>English</strong></summary>
+
+## Overview
+
+- Current version: `0.0.15`
+- Use cases: attachment preview in business systems, inline viewing, dialog preview, and standalone preview pages
+- Supports Vue 3, a Vue 2 adapter entry, and standalone assets for non-Vue projects
+
+Recent updates:
+
+- `0.0.15`: rewrote `README.md` for npm with collapsible Chinese and English sections, and synchronized package description and documentation version info
+- `0.0.14`: optimized blank area handling in `xlsx`, removed undeclared frozen header/column behavior, and added paged/all display switching for `PDF` and `DOCX`
+- `0.0.13`: fixed retry behavior after preview failures in dialog mode, refreshed README examples, and clarified packaging details
+- `0.0.12`: fixed missing background, text, and border colors for some `xlsx` cells, and added `theme / tint / indexed` color parsing
+
+For the full release history, see [CHANGELOG.md](./CHANGELOG.md).
+
+## Preview Screenshots
+
+Original screenshots are stored in `public/screenshots/`.
+
+The images below use the npm CDN URL. Local repository changes do not affect the already published package immediately; after publishing a new version, npm will show the latest screenshots directly.
+
+### DOCX
+
+![DOCX preview](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-docx.png)
+
+### XLSX
+
+![XLSX preview](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-xlsx.png)
+
+### PDF
+
+![PDF preview](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-pdf.png)
+
+### PPTX fallback
+
+`PPT` / `PPTX` files are intentionally not parsed as online previews for now. The component keeps a download entry instead of pretending the format is fully supported.
+
+![PPTX fallback](https://unpkg.com/@work-zhanguo/light-file-preview/public/screenshots/effect-pptx.png)
+
+## Supported Files
+
+Supported for online preview:
+
+- `PNG`
+- `JPG`
+- `JPEG`
+- `GIF`
+- `WEBP`
+- `BMP`
+- `SVG`
+- `PDF`
+- `TXT`
+- `JSON`
+- `JS`
+- `TS`
+- `JSX`
+- `TSX`
+- `HTML`
+- `CSS`
+- `MD`
+- `DOCX`
+- `XLS`
+- `XLSX`
+- `CSV`
+- `MP4`
+- `WEBM`
+- `MP3`
+- `WAV`
+
+Fallback to download entry:
+
+- `DOC`
+- `PPT`
+- `PPTX`
+- any unrecognized format
+
+Notes:
+
+- Supports remote `URL`, local `File`, and `Blob`
+- Supports both inline embedding and dialog preview
+- Unsupported formats are not force-rendered and always keep a download entry
+
+## Dependencies
+
+- [pdf.js](https://github.com/mozilla/pdf.js)
+- [docx-preview](https://github.com/VolodymyrBaydalka/docxjs)
+- [SheetJS](https://github.com/SheetJS/sheetjs)
+- [marked](https://github.com/markedjs/marked)
+- [DOMPurify](https://github.com/cure53/DOMPurify)
+
+## Installation
+
+```bash
+npm install @work-zhanguo/light-file-preview
+```
+
+## Component Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `source` | `string \| File \| Blob` | - | Required. Supports remote URLs, local `File`, and `Blob`. |
+| `fileName` | `string` | - | Optional file name. Recommended when a remote URL has no extension. |
+| `mode` | `'inline' \| 'dialog'` | `'inline'` | Inline preview or dialog preview. |
+| `visible` | `boolean` | `true` | Controls dialog visibility and works with `v-model:visible`. |
+| `loadingText` | `string` | `'文件加载中...'` | Loading text displayed during parsing. |
+| `textEncoding` | `string` | `'utf-8'` | Encoding used for text-like files. |
+| `maxTextBytes` | `number` | `2097152` | Max size for text preview, default is 2 MB. |
+| `maxSheetRows` | `number` | `200` | Maximum number of rows rendered in sheet preview. |
+| `maxSheetCols` | `number` | `50` | Maximum number of columns rendered in sheet preview. |
+| `pdfScale` | `number` | `1.35` | Render scale used for PDF pages. |
+| `showToolbar` | `boolean` | `true` | Whether to show the top toolbar. |
+| `dialogTitle` | `string` | `'文件预览'` | Fallback title used in dialog mode. |
+
+Events:
+
+- `update:visible`: emitted when the dialog closes
+- `error`: emitted with the parsing error object
+
+## Vue 3 Integration
+
+```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 Integration
+
+```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>
+```
+
+## Dialog Preview
+
+```vue
+<template>
+  <button @click="show = true">Open dialog preview</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>
+```
+
+## Standalone Preview Page
+
+It is recommended to pass `name` as well so extension detection stays stable.
+
+```js
+const remoteUrl = 'https://example.com/files/test.docx';
+const previewUrl =
+  '/?preview=1&src=' +
+  encodeURIComponent(remoteUrl) +
+  '&name=' +
+  encodeURIComponent('test.docx');
+
+window.open(previewUrl, '_blank');
+```
+
+## Native Project Integration
+
+Non-Vue projects can directly use the standalone bundle.
+
+If you copy static assets from the npm package, the recommended files are:
+
+- `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>
+<script src="/vendor/light-file-preview/light-file-preview.iife.js"></script>
+<script>
+  window.LightFilePreview.mount('#preview-root', {
+    source: '/uploads/report.xlsx'
+  });
+</script>
+```
+
+## Odoo Integration
+
+For Odoo projects, the recommended approach is to mount the standalone bundle through static assets and an Owl component.
+
+```js
+/** @odoo-module **/
+
+import { Component, onMounted, useRef } from '@odoo/owl';
+
+export class FilePreviewBlock extends Component {
+  setup() {
+    this.rootRef = useRef('root');
+
+    onMounted(() => {
+      window.LightFilePreview.mount(this.rootRef.el, {
+        source: this.props.source,
+        fileName: this.props.fileName || 'report.pdf'
+      });
+    });
+  }
+}
+
+FilePreviewBlock.template = 'your_module.FilePreviewBlock';
+```
+
+```xml
+<templates xml:space="preserve">
+  <t t-name="your_module.FilePreviewBlock">
+    <div class="o_file_preview_root" t-ref="root" />
+  </t>
+</templates>
+```
+
+## Deployment
+
+Build the component library:
+
+```bash
+npm install
+npm run build
+```
+
+Output directories:
+
+- `dist/`
+- `dist/standalone/`
+
+If you want to deploy both the demo home page and the docs page as a static site:
+
+```bash
+npm run build:site
+```
+
+Static site output:
+
+- `dist-site/`
+
+</details>

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
+};