【组件开发】FileViewDialog-v2 文件预览对话框组件

组件概述

FileViewDialog 是一个功能强大的文件预览组件，支持多种文件类型的在线预览，包括文档、图片、视频和音频等格式。组件采用轮播方式展示多个文件，并提供下载功能。

功能特性

• 📄 支持文档类型：docx、xlsx、xls、pdf、pptx
• 🖼️ 支持图片类型：png、jpg、jpeg、gif、bmp、webp、svg
• 🎬 支持视频类型：mp4、webm、ogg、mov
• 🎵 支持音频类型：mp3、wav、ogg、m4a
• 🔍 图片预览模式支持缩放查看
• 📥 提供文件下载功能
• 🔄 支持多文件轮播浏览

安装与使用

1. 安装依赖

npm install @vue-office/docx @vue-office/excel @vue-office/pdf @vue-office/pptx

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

2. 引入组件

import FileViewDialog from '@/components/FileViewDialog.vue'

export default {
  components: {
    FileViewDialog
  }
}

3. 基本使用

<template>
  <file-view-dialog 
    :file-list="files" 
    :initial-index="currentIndex"
    @close="handleClose"
    @rendered="handleRendered"
  />
</template>
<script>
export default {
  data() {
    return {
      files: [
        {
          name: '示例文档.docx',
          type: 'docx',
          url: 'https://example.com/sample.docx'
        },
        {
          name: '示例图片.png',
          type: 'png',
          url: 'https://example.com/sample.png'
        }
      ],
      currentIndex: 0
    }
  },
  methods: {
    handleClose() {
      // 关闭对话框回调
    },
    handleRendered(file) {
      // 文件渲染完成回调
      console.log('文件已渲染:', file.name)
    }
  }
}
</script>

Props 属性

参数	说明	类型	默认值	必填
file-list	文件列表，每个文件对象需包含url和type属性	Array	[]	是
initial-index	初始显示的文件索引	Number	0	否

Events 事件

事件名	说明	回调参数
close	关闭对话框时触发	-
rendered	文件渲染完成时触发	当前文件对象

文件对象结构

{
  name: '文件名',    // 文件名（可选）
  type: '文件类型',  // 文件扩展名，如 'docx', 'png' 等
  url: '文件URL',   // 文件访问地址
  poster: '封面图URL' // 视频封面图（仅视频类型可选）
}

注意事项

1. 文件URL要求：

• • 需要确保文件URL是可访问的
  • 如果是跨域资源，需要服务端配置CORS

2. 文档预览：

• • 依赖@vue-office系列组件
  • 大型文档可能需要较长时间渲染

3. 图片预览：

• • 支持图片缩放查看
  • 大图片建议使用缩略图提高性能

4. 视频/音频：

• • 建议提供适当的封面图(poster)
  • 视频格式兼容性取决于浏览器

样式定制

组件使用SCSS编写样式，可以通过以下方式定制：

1. 覆盖默认样式：

/* 在父组件中 */
.preview-container {
  .file-info {
    background-color: #f0f0f0;
  }
}

2. 修改主题变量：

$--color-primary: #409EFF; /* 修改主题色 */

浏览器兼容性

• 现代浏览器（Chrome, Firefox, Safari, Edge最新版本）
• 不支持IE浏览器

完整代码仓库：FileViewDialog-v2 文件预览对话框组件