WisdomCity-Web/wisdomcity-office: 文件预览 @ vue3

1. 组件概述

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

安装依赖包

依赖包名称	版本	用途
docx-preview	0.3.5	Word 文档预览
exceljs	4.4.0	Excel 文件解析
pdfjs-dist	5.1.91	PDF 文档预览
html2canvas	1.4.1	HTML 转图像
tinycolor2	1.6.0	颜色处理
x-data-spreadsheet	1.1.9	Excel 表格渲染
lodash-es	4.17.21	JavaScript 工具库
element-plus	2.9.8	el-image 显示图片

npm install docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-plus

yarn add docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-plus

pnpm add docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-plus

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

<template>
  <view-file
    :file="fileObject" 
    />
</template>

<script setup>
  import { ref } from 'vue'
  import ViewFile from "@/components/view_file/index.vue"

  const fileObject = ref({
    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 setup>
import ViewFile from "@/components/view_file/index.vue"
import { readBuffer } from "@/components/view_file/util"

const fileObject = ref({
  filename: "",
  type: "",
  fileBuffer: null
})
    
const handleFileChange = async (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 setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import ViewFile from "@/components/view_file/index.vue"
import { readBuffer } from "@/components/view_file/util"
import axios from 'axios'

const route = useRoute()
const fileObject = ref({
  filename: "",
  type: "",
  fileBuffer: null
})

const fetchFile = async (fileId) => {
  try {
    const response = await axios.get(`/api/files/${fileId}`)
    const name = response.data.filename
    // 获取文件名和类型
    fileObject.value.filename = name
    fileObject.value.type = name.split('.').pop().toLowerCase()
    const arrayBuffer = await readBuffer(response.data.file)
    fileObject.value.fileBuffer = arrayBuffer
  } catch (error) {
    console.error('文件获取失败', error)
  }
}

onMounted(() => {
  // 从路由参数获取文件ID
  const fileId = route.params.fileId
  if (fileId) {
    fetchFile(fileId)
  }
})
</script>

6. 注意事项

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

README.md 6.1 KB Permalink Lịch sử Raw