fix: readme

README.md

@@ -1,41 +1,252 @@
-<!--
- * @Author: WangQiBiao
- * @LastEditors: LiZhiWei
- * @Description:
- * @Date: 2019-05-14 12:01:55
- * @LastEditTime: 2025-04-16 11:54:19
- -->
-# WisdomCityOffice
+<h2 id="rSVWk">1. 组件概述</h2>
+ViewFile 是一个功能强大的文件预览组件，支持多种文件格式的在线预览，包括文档、表格、演示文稿、图片和文本文件等。该组件能够根据文件类型自动选择合适的渲染器进行内容展示，为用户提供便捷的文件预览体验。
 
-## 当前版本：v1.0.0
+<h2 id="SK0VG">2. 组件结构</h2>
+ViewFile 组件采用模块化设计，主要包含以下部分：
 
+```plain
+view_file/
+├── index.vue          # 主组件入口
+├── index.less         # 样式文件
+├── util.js            # 工具函数
+├── renders.js         # 渲染器注册
+└── vendors/           # 各类型文件渲染器
+    ├── image/         # 图片渲染
+    ├── other/         # 不支持预览的文件处理
+    ├── pdf/           # PDF渲染
+    ├── pptx/          # PPT渲染
+    ├── text/          # 文本渲染
+    └── xlsx/          # Excel渲染
+    └── colz/          # Colz渲染    
+```
 
-## Install
+<h2 id="shZJb">3. 使用方法</h2>
+<h3 id="i1B2h">3.1 基本用法</h3>
+1. 安装依赖包
 
-```
-npm install
-```
+| 依赖包名称 | 版本 | 用途 |
+| :---: | :---: | :---: |
+| docx-preview | 0.3.5 | Word 文档预览 |
+| exceljs | 4.4.0 | Excel 文件解析 |
+| pdfjs-dist | 2.4.456  | PDF 文档预览 |
+| html2canvas | 1.4.1 | HTML 转图像 |
+| tinycolor2 | 1.6.0 | 颜色处理 |
+| x-data-spreadsheet | 1.1.9 | Excel 表格渲染 |
+| lodash-es | 4.17.21 | JavaScript 工具库 |
+| element-ui | 2.15.13 | el-image 显示图片 |
 
-## Run
 
-### Development
+```bash
+npm install docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist@2.4.456 html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-ui
+```
 
+```bash
+yarn add docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist@2.4.456 html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-ui
 ```
-npm run dev
+
+```bash
+pnpm add docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist@2.4.456 html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-ui
 ```
 
-### Production
+2. 将viewFile组件源码移入项目components目录下在需要使用的页面中引入
+
+```vue
+<template>
+  <view-file
+    :file="fileObject" 
+    />
+</template>
 
+<script>
+  import ViewFile from "@/components/view_file/index.vue"
+
+  export default {
+    components: {
+      ViewFile
+    },
+    data() {
+      return {
+        fileObject: {
+          filename: "示例文件.docx",
+          type: "docx",
+          fileBuffer: null // ArrayBuffer类型的文件内容
+        }
+      }
+    }
+  }
+</script>
 ```
-npm run build
+
+<h3 id="kWppv">3.2 参数说明</h3>
+Props
+
+| 参数名 | 类型 | 默认值 | 说明 | 是否必填 |
+| :---: | :---: | :---: | :---: | :---: |
+| file | Object | {} | 文件对象，包含文件名、类型和文件内容 | 是 |
+
+
+file 对象属性
+
+| 属性名 | 类型 | 说明 | 是否必填 |
+| :---: | :---: | :---: | :---: |
+| filename | String | 文件名称 | 是 |
+| type | String | 文件类型（扩展名，如docx、xlsx等） | 是 |
+| fileBuffer | ArrayBuffer | 文件内容的二进制数据 | 是 |
+
+
+<h2 id="lns5o">4. 支持的文件类型</h2>
+ViewFile 组件支持以下文件类型的在线预览：
+
+<h3 id="HGCfn">4.1 文档类</h3>
++ Word文档 ：docx
++ PDF文档 ：pdf
+
+<h3 id="d32Wg">4.2 表格类</h3>
++ Excel表格 ：xlsx
+
+<h3 id="DXweJ">4.3 演示文稿</h3>
++ PowerPoint ：pptx
+
+<h3 id="oH43n">4.4 图片类</h3>
+支持多种图片格式：
+
++ gif
++ jpg/jpeg
++ bmp
++ tiff/tif
++ png
++ svg
+
+<h3 id="ggdtM">4.5 文本类</h3>
+支持多种文本和代码文件：
+
++ txt（纯文本）
++ json（JSON数据）
++ js（JavaScript）
++ css（样式表）
++ java（Java代码）
++ py（Python代码）
++ html（HTML文档）
++ jsx（React JSX）
++ ts/tsx（TypeScript）
++ xml（XML文档）
++ md（Markdown）
++ log（日志文件）
+
+<h2 id="wc5fk">5. 示例代码</h2>
+<h3 id="XRxq1">5.1 从文件对象创建预览</h3>
+```vue
+<template>
+  <div>
+    <input type="file" @change="handleFileChange" />
+    <view-file
+      :file="fileObject" 
+    />
+  </div>
+</template>
+<script>
+import ViewFile from "@/components/view_file/index.vue"
+import { readBuffer } from "@/components/view_file/util"
+
+export default {
+  components: {
+    ViewFileComponent
+  },
+  data() {
+    return {
+      fileObject: {
+        filename: "",
+        type: "",
+        fileBuffer: null
+      }
+    }
+  },
+  methods: {
+    async handleFileChange(e) {
+      const file = e.target.files[0]
+      if (!file) return
+      try {
+        const buffer = await readBuffer(file)
+        this.fileObject = {
+          filename: file.name,
+          type: file.name.split('.').pop().toLowerCase(),
+          fileBuffer: buffer,
+        }
+      } catch (error) {
+        console.error('文件读取失败', error)
+      } 
+    }
+  }
+}
+</script>
+
 ```
 
-## 简介
+<h3 id="GfNtc">5.2 从服务器获取文件并预览</h3>
+假设请求返回数据格式response.data
+
+| 属性名 | 类型 | 说明 |
+| :---: | :---: | :---: |
+| filename | String | 文件名称 |
+| file | Blob | 文件内容数据 |
+
 
-wisdomcity-office
+```vue
+<template>
+  <view-file 
+    :file="fileObject" 
+  />
+</template>
+<script>
+import ViewFile from "@/components/view_file/index.vue"
+import { readBuffer } from "@/components/view_file/util"
+import axios from 'axios'
+
+export default {
+  components: {
+    ViewFileComponent
+  },
+  data() {
+    return {
+      fileObject: {
+        filename: "",
+        type: "",
+        fileBuffer: null
+      }
+    }
+  },
+  methods: {
+    async fetchFile(fileId) {
+      try {
+        const response = await axios.get(`/api/files/${fileId}`)
+        const name = response.data.filename
+        // 获取文件名和类型
+        this.fileObject.filename = name
+        this.fileObject.type = name.split('.').pop().toLowerCase()
+        readBuffer(response.data.file).then((arrayBuffer) => {
+          this.fileObject.fileBuffer = arrayBuffer
+        })
+      } catch (error) {
+        console.error('文件获取失败', error)
+      }
+    }
+  },
+  mounted() {
+    // 假设从路由参数获取文件ID
+    const fileId = this.$route.params.fileId
+    if (fileId) {
+      this.fetchFile(fileId)
+    }
+  }
+}
+</script>
+
+```
 
-在线预览pptx、docx、pdf、xlsx、txt等文件
+<h2 id="Dc4BG">6. 注意事项</h2>
+1. 确保提供正确的文件类型（扩展名），组件根据扩展名选择渲染器
+2. 文件内容必须是 ArrayBuffer 格式
+3. 大文件可能会影响性能，特别是复杂的Excel或PDF文件
+4. 对于不支持的文件类型，组件会显示提示信息而不是尝试渲染
+5. 组件内部已处理异常，但建议在外部添加错误处理逻辑
 
-## 问题记录
-1. 预览pdf时，组合图片识别宽度有问题
-2. 预览pdf时，段落序号识别有问题，无法识别棱形，✅形等形状。