@work-zhanguo/light-file-preview 0.0.1

package/README.md

@@ -0,0 +1,122 @@
+# @work-zhanguo/light-file-preview
+
+轻量级通用文件预览项目，基于 Vue3 实现，兼顾 npm 集成和独立产物嵌入。
+
+## 特性
+
+- 支持通过文件路径直接预览，默认内联展示
+- 支持弹窗模式嵌入，也支持独立 IIFE 产物挂载到任意 HTML 节点
+- 支持统一下载，无法在线预览的格式仍可下载
+- PDF 使用 `pdf.js`，DOCX 使用 `docx-preview`，表格使用 `SheetJS`
+- 文本、代码、JSON、Markdown 采用按需读取与加载过渡，兼顾等待体验
+- 支持中文路径自动编码处理，降低路径拼接集成成本
+
+## 支持情况
+
+| 类型 | 扩展名 | 预览说明 |
+| --- | --- | --- |
+| 图片 | `png/jpg/jpeg/gif/webp/bmp/svg` | 高保真原生预览 |
+| PDF | `pdf` | `pdf.js` 高保真渲染 |
+| 文本 | `txt/json/js/ts/jsx/tsx/html/css/md` | 文本或 Markdown 预览 |
+| Word | `docx` | `docx-preview` 中高保真 |
+| Excel | `xls/xlsx/csv` | `SheetJS` 数据高保真 |
+| 视频 | `mp4/webm` | 原生播放器 |
+| 音频 | `mp3/wav` | 原生播放器 |
+| 其他 | `doc/ppt/pptx` 等 | 默认提示暂不支持预览，但支持下载 |
+
+## 安装
+
+```bash
+npm install @work-zhanguo/light-file-preview
+```
+
+## 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/示例.pdf" />
+</template>
+```
+
+## 按需引入
+
+```vue
+<script setup lang="ts">
+import { FilePreview } from '@work-zhanguo/light-file-preview';
+import '@work-zhanguo/light-file-preview/style.css';
+</script>
+
+<template>
+  <FilePreview source="/assets/report.docx" mode="dialog" v-model:visible="visible" />
+</template>
+```
+
+## 独立产物嵌入任意项目
+
+执行构建后，将 `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/合同.pdf'
+  });
+</script>
+```
+
+弹窗模式：
+
+```html
+<script>
+  window.LightFilePreview.openDialog({
+    source: '/uploads/报表.xlsx'
+  });
+</script>
+```
+
+## 组件参数
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `source` | `string \| File \| Blob` | - | 文件路径或二进制对象 |
+| `fileName` | `string` | - | 自定义文件名 |
+| `mode` | `'inline' \| 'dialog'` | `inline` | 预览模式 |
+| `visible` | `boolean` | `true` | 弹窗是否显示 |
+| `loadingText` | `string` | `文件加载中...` | 加载提示 |
+| `textEncoding` | `string` | `utf-8` | 文本解码编码 |
+| `maxTextBytes` | `number` | `2097152` | 文本最多读取字节数 |
+| `maxSheetRows` | `number` | `200` | 表格最多展示行数 |
+| `maxSheetCols` | `number` | `50` | 表格最多展示列数 |
+| `pdfScale` | `number` | `1.35` | PDF 渲染缩放 |
+| `showToolbar` | `boolean` | `true` | 是否显示工具栏 |
+
+## 集成说明
+
+- 文件路径必须是浏览器可访问地址，跨域资源需目标服务端允许 CORS
+- 组件会在 `File/Blob` 场景自动创建并释放 `Object URL`
+- 大文件文本预览默认只截取前 2MB，避免阻塞页面
+- `.html` 默认按文本展示，不直接执行内容，降低安全风险
+
+## 开发
+
+```bash
+npm install
+npm run dev
+```
+
+## 打包
+
+```bash
+npm run build
+```

package/dist/DocxRenderer-B8Ed3qFw.js

@@ -0,0 +1,42 @@
+import { defineComponent as s, ref as f, onMounted as u, onBeforeUnmount as d, openBlock as m, createElementBlock as p } from "vue";
+import { r as v } from "./text-CcxmtFce.js";
+const x = /* @__PURE__ */ s({
+  __name: "DocxRenderer",
+  props: {
+    source: {}
+  },
+  emits: ["loading", "error"],
+  setup(a, { emit: c }) {
+    const i = a, n = c, e = f(null), o = new AbortController();
+    async function l() {
+      n("loading", !0);
+      try {
+        const r = await v(i.source, o.signal), { renderAsync: t } = await import("./docx-preview-B2OPGnfm.js");
+        if (!e.value)
+          return;
+        e.value.innerHTML = "", await t(r, e.value, void 0, {
+          className: "lfp-docx-content",
+          ignoreWidth: !1,
+          ignoreHeight: !1,
+          useBase64URL: !0
+        });
+      } catch (r) {
+        n("error", r instanceof Error ? r : new Error("DOCX 预览失败"));
+      } finally {
+        n("loading", !1);
+      }
+    }
+    return u(() => {
+      l();
+    }), d(() => {
+      o.abort(), e.value && (e.value.innerHTML = "");
+    }), (r, t) => (m(), p("div", {
+      ref_key: "containerRef",
+      ref: e,
+      class: "lfp-document lfp-docx"
+    }, null, 512));
+  }
+});
+export {
+  x as default
+};