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

package/README.md

@@ -1,42 +1,71 @@
-# @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.11`
+- 当前版本：`0.0.13`
+- 适用场景：业务系统附件预览、在线查看、弹窗预览、新页面预览
+- 支持 Vue 3、Vue 2 适配入口，以及非 Vue 项目的 standalone 产物
 
 最近更新：
 
+- `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`
@@ -49,10 +78,17 @@
 - `MP3`
 - `WAV`
 
+降级为下载入口：
+
+- `DOC`
+- `PPT`
+- `PPTX`
+- 其他未识别格式
+
 补充说明：
 
 - 支持远程 `URL`、本地 `File`、`Blob`
-- 支持新页面预览和弹窗预览
+- 支持直接嵌入和弹窗预览
 - 不支持的格式不强行预览，统一保留下载入口
 
 ## 项目依赖
@@ -65,26 +101,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';
-```
-
 ## 组件属性
 
 | 属性 | 类型 | 默认值 | 说明 |
@@ -107,9 +127,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';
@@ -126,6 +199,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>
@@ -170,55 +248,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/`
 
 如果要把首页演示页和文档页一起部署成静态站点，执行：
 
@@ -228,18 +270,4 @@ npm run build:site
 
 站点部署目录：
 
-```bash
-dist-site/
-```
-
-其中会包含：
-
-- `dist-site/index.html`
-- `dist-site/docs.html`
-
-## 接入说明
-
-- 本地上传文件只在当前浏览器中预览，不会保存到服务器
-- 如果是远程文件预览，需要目标地址允许浏览器访问和跨域读取
-- 弹窗预览会挂到 `body`
-- 不支持的文件格式会保留下载入口
+- `dist-site/`