# 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 vue-office-preview-lite
```

2. 引入组件
```vue
<template>
  <file-preview :fileUrl="fileUrl" />
</template>

<script setup>
import FilePreview from 'vue-office-preview-lite'
</script>
```

## 组件属性

| 属性名 | 类型   | 必填 | 默认值 | 说明           |
|--------|--------|------|--------|----------------|
| fileUrl | String | 是   | -      | 文件访问地址   |
| fileType | String | 否   | null   | 文件类型，可选值：'pdf'、'word'、'excel'、'ppt' |
| 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 
      :fileUrl="fileUrl"
      :fileType="fileType"
      frameUrl="./office-preview/index.html"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FilePreview from 'vue-office-preview-lite'

const fileUrl = ref('https://example.com/document.pdf')
const fileType = ref('pdf') // 可选，不传则自动判断
</script>

<style scoped>
.preview-container {
  width: 100%;
  height: 800px;
}
</style>
```