FilePreview 组件

一个功能丰富的 Vue 3 文件预览组件，支持多种文件类型的在线预览。

功能特性

• 📄 支持 Office 文件预览：Word (docx)、Excel (xlsx)、PPT (pptx)、PDF
• 🖼️ 支持图片预览：png、jpg、jpeg、gif、svg、webp、bmp
• 📝 支持文本文件预览：Markdown (md)、纯文本 (txt)
• 🔄 自动检测文件类型
• 📁 支持通过 URL 或 Blob 对象加载文件
• ⏳ 提供加载状态
• 🎯 支持自定义文件类型
• 📞 提供渲染成功和错误的回调

安装

作为 npm 包安装

# 安装组件及其依赖
npm install v3-office-preview

项目依赖

组件会自动安装以下依赖：

• Vue 3
• @vue-office/docx
• @vue-office/excel
• @vue-office/pdf
• @vue-office/pptx
• v3-markdown-stream

使用方法

基本使用

<template>
  <FilePreview url="https://example.com/file.pdf" />
</template>

<script setup lang="ts">
import FilePreview from 'v3-office-preview'
</script>

使用 Blob 对象

当使用本地文件时，不需要提供 url，只需要提供 blob 即可，组件会自动尝试从 Blob 中检测文件类型。

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <FilePreview v-if="fileBlob" :blob="fileBlob" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FilePreview from 'vue-file-preview-component'

const fileBlob = ref<Blob | undefined>(undefined)

const onFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files[0]) {
    fileBlob.value = target.files[0]
  }
}
</script>

手动指定文件类型

<template>
  <FilePreview url="https://example.com/document" fileType="docx" />
</template>

<script setup lang="ts">
import FilePreview from 'vue-file-preview-component'
</script>

Props

| 属性名 | 类型 | 必填 | 默认值 | 说明 | |-------|------|------|-------|------| | url | string | 否 | - | 文件的 URL 地址 | | blob | Blob | 否 | undefined | 文件的 Blob 对象（优先级高于 url） | | fileType | string | 否 | '' | 文件类型，如不提供则自动从 URL 或 Blob 中提取 |

支持的文件类型

Office 文件

• Word: docx (支持 .doc 和 .docx)
• Excel: xlsx (支持 .xls 和 .xlsx)
• PPT: pptx (支持 .ppt 和 .pptx)
• PDF: pdf

图片文件

• png, jpg, jpeg, gif, svg, webp, bmp

文本文件

• md (Markdown)
• txt (纯文本)

项目结构

src/
├── components/
│   └── FilePreview.vue  # 文件预览组件
├── App.vue              # 应用入口组件
├── main.ts              # 应用入口文件
└── style.css            # 全局样式

开发指南

启动开发服务器

npm run dev

构建项目

npm run build

类型检查

npm run type-check

技术栈

• Vue 3 + TypeScript + Vite
• @vue-office 系列库（用于 Office 文件预览）
• v3-markdown-stream（用于 Markdown 预览）

浏览器兼容性

• Chrome (推荐)
• Firefox
• Safari
• Edge

注意事项

1. 对于 Office 文件预览，需要确保服务器支持 CORS，否则可能会遇到跨域问题
2. 对于大文件，预览可能会需要较长时间，建议在使用时添加适当的加载提示
3. 某些特殊格式的文件可能无法完全正确预览，这取决于底层预览库的支持程度

许可证

MIT