ywb-office-preview 1.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 杨文彬
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,198 @@
+# Vue Office 文件预览组件
+
+一个基于 Vue 2 的 Office 文件在线预览组件，支持 PDF、Word、Excel、PowerPoint 等常见办公文档的在线预览。
+
+## 目标
+`@vue-office`是一个非常方便的文件预览组件，但是依赖也很大，如果直接在项目中依赖，则增加了很多额外依赖，相对应带来的问题：
+- 浏览器加载需要优化，如何分包，如何懒加载
+- `webpack` 或 `vite` 需要配置对应的文件，相对会降低开发时的构建工具的处理速度
+
+## 解决方案
+采用 iframe 隔离方案：
+1. 将 `@vue-office` 的代码编译到 iframe 中，打包到 `office-preview` 目录下
+2. `vue` 组件通过 `iframe` 和 `office-preview` 下的代码交互
+3. 使用 `copy-webpack-plugin` 或 `vite-plugin-static-copy` 实现开发时动态代理`iframe`
+
+## 架构设计
+
+```mermaid
+graph TD
+    A[Vue 主应用] -->|postMessage| B[iframe 容器]
+    B -->|加载| C[office-preview 应用]
+    C -->|文件类型判断| D[文件类型判断模块]
+    D -->|PDF| E[PDF 预览]
+    D -->|Word| F[Word 预览]
+    D -->|Excel| G[Excel 预览]
+    D -->|PPT| H[PPT 预览]
+    
+    subgraph 主应用
+    A
+    end
+    
+    subgraph 预览应用
+    B
+    C
+    D
+    E
+    F
+    G
+    H
+    end
+```
+
+### 核心模块说明
+
+1. **主应用模块**
+   - Vue 组件封装
+   - iframe 通信管理
+   - 文件 URL 处理
+
+2. **预览应用模块**
+   - 文件类型判断
+   - 预览组件加载
+   - 文件内容渲染
+
+3. **通信模块**
+   - postMessage 消息处理
+   - 状态同步
+   - 错误处理
+
+## 功能特点
+- 📄 支持多种文件格式预览
+  - PDF 文件（.pdf）
+  - Word 文档（.doc, .docx）
+  - Excel 表格（.xls, .xlsx）
+  - PowerPoint 演示文稿（.ppt, .pptx）
+- 🔍 智能文件类型识别
+  - 通过文件扩展名快速判断
+  - 通过文件内容（magic number）精确判断
+  - 支持新旧版 Office 文件格式
+- 🎨 美观的界面设计
+  - 自适应容器大小
+  - 响应式布局
+  - 优雅的错误提示
+- ⚡ 高性能实现
+  - 按需加载预览组件
+  - 优化的文件类型判断逻辑
+  - 完善的错误处理机制
+
+## 技术栈
+
+- Vue 2
+- TypeScript
+- vue-office 系列组件
+  - @vue-office/pdf
+  - @vue-office/docx
+  - @vue-office/excel
+  - @vue-office/pptx
+
+## 安装使用
+
+1. 安装依赖
+```bash
+npm install ywb-office-preview
+```
+
+2. 引入组件
+```vue
+<template>
+  <file-preview :src="fileUrl" />
+</template>
+
+<script setup>
+import FilePreview from './components/FilePreview.vue'
+</script>
+```
+
+## 组件属性
+
+| 属性名 | 类型   | 必填 | 默认值 | 说明           |
+|--------|--------|------|--------|----------------|
+| fileUrl    | String | 是   | -      | 文件访问地址   |
+| fileType | String | 否   | `null`   | 文件类型   |
+| frameUrl  | String | 否   | `./office-preview/index.html`  | 预览iframe的地址   |
+
+
+## 文件类型判断逻辑
+
+1. 扩展名判断（快速）
+   - 通过文件 URL 后缀快速判断文件类型
+   - 支持常见文件扩展名
+
+2. 内容判断（精确）
+   - PDF: `%PDF` 文件头
+   - DOCX/XLSX/PPTX: ZIP 文件头 + 内容类型判断
+   - 旧版 Office 文件: 复合文档格式判断
+
+## 示例代码
+
+```vue
+<template>
+  <div class="preview-container">
+    <file-preview 
+      :src="fileUrl"
+      width="800px"
+      height="600px"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import FilePreview from './components/FilePreview.vue'
+
+const fileUrl = ref('https://example.com/document.pdf')
+</script>
+
+<style scoped>
+.preview-container {
+  width: 100%;
+  height: 800px;
+}
+</style>
+```
+
+## 开发指南
+
+### 本地开发
+1. 克隆项目
+```bash
+git clone https://gitee.com/as1314/office-preview.git
+```
+
+2. 安装依赖
+```bash
+npm install
+```
+
+3. 启动开发服务器
+```bash
+npm run dev
+```
+
+### 构建部署
+1. 构建全部（库 + 预览应用）
+```bash
+npm run build
+```
+
+2. 仅构建库（输出 lib/）
+```bash
+npm run build:lib
+```
+
+3. 仅构建预览应用（输出 office-preview/）
+```bash
+npm run build:html
+```
+
+## 贡献指南
+
+欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。
+
+## 许可证
+
+MIT License
+
+
+

package/lib/index.cjs.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const uuidv4 = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+};
+class FrameChannel {
+  constructor(iframe) {
+    this.callbackMap = /* @__PURE__ */ new Map();
+    this.eventMap = /* @__PURE__ */ new Map();
+    this.win = (iframe == null ? void 0 : iframe.contentWindow) || window;
+    this.onMessage = this.onMessage.bind(this);
+    this.win.addEventListener("message", this.onMessage);
+  }
+  emit(event, ...args) {
+    return new Promise((resolve) => {
+      const callbackId = uuidv4();
+      this.callbackMap.set(callbackId, resolve);
+      this.win.postMessage(
+        {
+          event,
+          args,
+          callbackId
+        },
+        "*"
+      );
+    });
+  }
+  addEventListener(event, callback) {
+    this.eventMap.set(event, callback);
+  }
+  onMessage(event) {
+    const { event: eventName, args, callbackId } = event.data;
+    if (/^callback:/.test(eventName)) {
+      const backId = eventName.replace(/^callback:/, "");
+      const callback = this.callbackMap.get(backId);
+      if (callback) {
+        callback(args);
+        this.callbackMap.delete(backId);
+        return;
+      }
+    }
+    const cb = this.eventMap.get(eventName);
+    if (cb) {
+      const resp = (results) => {
+        this.win.postMessage(
+          {
+            event: `callback:${callbackId}`,
+            args: results
+          },
+          "*"
+        );
+      };
+      cb(resp, ...args);
+    }
+  }
+}
+const SupportedFileType = ["excel", "pdf", "ppt", "word"];
+const SupportedFileExtension = [
+  {
+    type: "excel",
+    extension: [".xls", ".xlsx"]
+  },
+  {
+    type: "pdf",
+    extension: [".pdf"]
+  },
+  {
+    type: "word",
+    extension: [".doc", ".docx"]
+  },
+  {
+    type: "ppt",
+    extension: [".ppt", ".pptx"]
+  }
+];
+class PreviewFrameChannel extends FrameChannel {
+}
+class OfficePreviewChannel extends FrameChannel {
+}
+const OfficePreview = vue.defineComponent({
+  name: "OfficePreview",
+  props: {
+    fileUrl: {
+      type: String
+    },
+    frameUrl: {
+      type: String,
+      default: "./office-preview/index.html"
+    },
+    fileType: {
+      type: String,
+      default: null
+    }
+  },
+  emits: {},
+  setup(props, context) {
+    const frameRef = vue.ref();
+    const channelRef = vue.ref();
+    vue.onMounted(() => {
+      const channel = new OfficePreviewChannel(frameRef.value);
+      channel.addEventListener("loaded", () => {
+        channelRef.value = channel;
+        context.emit("loaded", channel);
+        updateFile();
+      });
+    });
+    const updateFile = () => {
+      var _a;
+      if (props.fileUrl) {
+        (_a = channelRef.value) == null ? void 0 : _a.emit("loadFile", props.fileUrl, props.fileType);
+      }
+    };
+    vue.watch(() => props.fileUrl, updateFile);
+    vue.watch(() => props.fileType, updateFile);
+    return () => {
+      return vue.h("iframe", {
+        "ref": frameRef,
+        "attrs": {
+          "src": props.frameUrl
+        },
+        "class": "office-preview"
+      });
+    };
+  }
+});
+exports.FrameChannel = FrameChannel;
+exports.OfficePreview = OfficePreview;
+exports.OfficePreviewChannel = OfficePreviewChannel;
+exports.PreviewFrameChannel = PreviewFrameChannel;
+exports.SupportedFileExtension = SupportedFileExtension;
+exports.SupportedFileType = SupportedFileType;

package/lib/index.css

@@ -0,0 +1,5 @@
+.office-preview {
+  width: 100%;
+  height: 100%;
+  border: none;
+}

package/lib/index.js

@@ -0,0 +1,135 @@
+import { defineComponent, ref, onMounted, watch, h } from "vue";
+const uuidv4 = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+};
+class FrameChannel {
+  constructor(iframe) {
+    this.callbackMap = /* @__PURE__ */ new Map();
+    this.eventMap = /* @__PURE__ */ new Map();
+    this.win = (iframe == null ? void 0 : iframe.contentWindow) || window;
+    this.onMessage = this.onMessage.bind(this);
+    this.win.addEventListener("message", this.onMessage);
+  }
+  emit(event, ...args) {
+    return new Promise((resolve) => {
+      const callbackId = uuidv4();
+      this.callbackMap.set(callbackId, resolve);
+      this.win.postMessage(
+        {
+          event,
+          args,
+          callbackId
+        },
+        "*"
+      );
+    });
+  }
+  addEventListener(event, callback) {
+    this.eventMap.set(event, callback);
+  }
+  onMessage(event) {
+    const { event: eventName, args, callbackId } = event.data;
+    if (/^callback:/.test(eventName)) {
+      const backId = eventName.replace(/^callback:/, "");
+      const callback = this.callbackMap.get(backId);
+      if (callback) {
+        callback(args);
+        this.callbackMap.delete(backId);
+        return;
+      }
+    }
+    const cb = this.eventMap.get(eventName);
+    if (cb) {
+      const resp = (results) => {
+        this.win.postMessage(
+          {
+            event: `callback:${callbackId}`,
+            args: results
+          },
+          "*"
+        );
+      };
+      cb(resp, ...args);
+    }
+  }
+}
+const SupportedFileType = ["excel", "pdf", "ppt", "word"];
+const SupportedFileExtension = [
+  {
+    type: "excel",
+    extension: [".xls", ".xlsx"]
+  },
+  {
+    type: "pdf",
+    extension: [".pdf"]
+  },
+  {
+    type: "word",
+    extension: [".doc", ".docx"]
+  },
+  {
+    type: "ppt",
+    extension: [".ppt", ".pptx"]
+  }
+];
+class PreviewFrameChannel extends FrameChannel {
+}
+class OfficePreviewChannel extends FrameChannel {
+}
+const OfficePreview = defineComponent({
+  name: "OfficePreview",
+  props: {
+    fileUrl: {
+      type: String
+    },
+    frameUrl: {
+      type: String,
+      default: "./office-preview/index.html"
+    },
+    fileType: {
+      type: String,
+      default: null
+    }
+  },
+  emits: {},
+  setup(props, context) {
+    const frameRef = ref();
+    const channelRef = ref();
+    onMounted(() => {
+      const channel = new OfficePreviewChannel(frameRef.value);
+      channel.addEventListener("loaded", () => {
+        channelRef.value = channel;
+        context.emit("loaded", channel);
+        updateFile();
+      });
+    });
+    const updateFile = () => {
+      var _a;
+      if (props.fileUrl) {
+        (_a = channelRef.value) == null ? void 0 : _a.emit("loadFile", props.fileUrl, props.fileType);
+      }
+    };
+    watch(() => props.fileUrl, updateFile);
+    watch(() => props.fileType, updateFile);
+    return () => {
+      return h("iframe", {
+        "ref": frameRef,
+        "attrs": {
+          "src": props.frameUrl
+        },
+        "class": "office-preview"
+      });
+    };
+  }
+});
+export {
+  FrameChannel,
+  OfficePreview,
+  OfficePreviewChannel,
+  PreviewFrameChannel,
+  SupportedFileExtension,
+  SupportedFileType
+};

package/lib/types/index.d.ts

@@ -0,0 +1,88 @@
+import { ComponentOptionsMixin } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
+
+declare type EventArgs<EventMap, EventName extends EventNames<EventMap>> = EventMap[EventName] extends (...args: any[]) => any ? Parameters<EventMap[EventName]> : any[];
+
+declare type EventCallback<EventMap, EventName extends EventNames<EventMap>> = (args: EventResponse<EventMap, EventName>) => void;
+
+declare type EventNames<EventMap> = EventMap extends {
+    [key: string]: any;
+} ? keyof EventMap : any;
+
+declare type EventResponse<EventMap, EventName extends EventNames<EventMap>> = EventMap[EventName] extends (...args: any[]) => any ? ReturnType<EventMap[EventName]> : never;
+
+/**
+ * iframe 通信channel
+ * @template EventsType 支持发送的事件类型
+ * @template ListenersType 支持监听的事件类型
+ */
+export declare class FrameChannel<EventsType = string | symbol, ListenersType = string | symbol> {
+    private win;
+    private callbackMap;
+    private eventMap;
+    constructor(iframe?: HTMLIFrameElement);
+    emit<T extends EventNames<EventsType>>(event: T, ...args: EventArgs<EventsType, T>): Promise<EventResponse<EventsType, T>>;
+    addEventListener<T extends EventNames<ListenersType>>(event: T, callback: (resolve: EventCallback<ListenersType, T>, ...args: EventArgs<ListenersType, T>) => void): void;
+    private onMessage;
+}
+
+export declare const OfficePreview: DefineComponent<    {
+fileUrl: {
+type: StringConstructor;
+};
+frameUrl: {
+type: StringConstructor;
+default: string;
+};
+fileType: {
+type: PropType<SupportedFileTypes>;
+default: null;
+};
+}, () => JSX.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+loaded: (channel: OfficePreviewChannel) => any;
+}, string, Readonly<ExtractPropTypes<    {
+fileUrl: {
+type: StringConstructor;
+};
+frameUrl: {
+type: StringConstructor;
+default: string;
+};
+fileType: {
+type: PropType<SupportedFileTypes>;
+default: null;
+};
+}>>, {
+frameUrl: string;
+fileType: SupportedFileTypes;
+}>;
+
+export declare class OfficePreviewChannel extends FrameChannel<PreviewComponentEvents, PreviewFrameEvents> {
+}
+
+export declare interface PreviewComponentEvents {
+    loadFile?: (fileUrl: string, fileType?: SupportedFileTypes) => void;
+}
+
+export declare class PreviewFrameChannel extends FrameChannel<PreviewFrameEvents, PreviewComponentEvents> {
+}
+
+export declare interface PreviewFrameEvents {
+    loaded?: () => void;
+}
+
+/**
+ * 文件类型映射表
+ */
+export declare const SupportedFileExtension: {
+    type: SupportedFileTypes;
+    extension: string[];
+}[];
+
+export declare const SupportedFileType: SupportedFileTypes[];
+
+declare type SupportedFileTypes = "word" | "excel" | "ppt" | "pdf";
+
+export { }