wisdomcity-office

1. 组件概述

ViewFile 是一个功能强大的文件预览组件，支持多种文件格式的在线预览，包括文档、表格、演示文稿、图片和文本文件等。该组件能够根据文件类型自动选择合适的渲染器进行内容展示，为用户提供便捷的文件预览体验。该项目基于 Vue 2.7.16 开发，请确保项目使用 Vue 2.x 版本。

2. 组件结构

ViewFile 组件采用模块化设计，主要包含以下部分：

view_file/
├── index.vue          # 主组件入口
├── index.less         # 样式文件
├── util.js            # 工具函数
├── renders.js         # 渲染器注册
└── vendors/           # 各类型文件渲染器
    ├── image/         # 图片渲染
    ├── other/         # 不支持预览的文件处理
    ├── pdf/           # PDF渲染
    ├── pptx/          # PPT渲染
    ├── text/          # 文本渲染
    └── xlsx/          # Excel渲染
    └── colz/          # Colz渲染    

3. 使用方法

3.1 基本用法

1. 安装依赖包

依赖包名称	版本	用途
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 显示图片

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

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

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

1. 将viewFile组件源码移入项目components目录下在需要使用的页面中引入

<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>

3.2 参数说明

Props

参数名	类型	默认值	说明	是否必填
file	Object	{}	文件对象，包含文件名、类型和文件内容	是

file 对象属性

属性名	类型	说明	是否必填
filename	String	文件名称	是
type	String	文件类型（扩展名，如docx、xlsx等）	是
fileBuffer	ArrayBuffer	文件内容的二进制数据	是

4. 支持的文件类型

ViewFile 组件支持以下文件类型的在线预览：

4.1 文档类

• Word文档 ：docx
• PDF文档 ：pdf

4.2 表格类

• Excel表格 ：xlsx

4.3 演示文稿

• PowerPoint ：pptx

4.4 图片类

支持多种图片格式：

• gif
• jpg/jpeg
• bmp
• tiff/tif
• png
• svg

4.5 文本类

支持多种文本和代码文件：

• txt（纯文本）
• json（JSON数据）
• js（JavaScript）
• css（样式表）
• java（Java代码）
• py（Python代码）
• html（HTML文档）
• jsx（React JSX）
• ts/tsx（TypeScript）
• xml（XML文档）
• md（Markdown）
• log（日志文件）

5. 示例代码

5.1 从文件对象创建预览

<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>

5.2 从服务器获取文件并预览

假设请求返回数据格式response.data

属性名	类型	说明
filename	String	文件名称
file	Blob	文件内容数据

<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>

6. 注意事项

1. 确保提供正确的文件类型（扩展名），组件根据扩展名选择渲染器
2. 文件内容必须是 ArrayBuffer 格式
3. 大文件可能会影响性能，特别是复杂的Excel或PDF文件
4. 对于不支持的文件类型，组件会显示提示信息而不是尝试渲染
5. 组件内部已处理异常，但建议在外部添加错误处理逻辑