dn-file-preview

一个简单的 Vue 弹出框文件预览组件，支持在线文档预览（通过外部预览服务）以及 MP4 视频播放（基于西瓜播放器 xgplayer）。

安装

# 先安装西瓜播放器（mp4 视频预览需要）
npm install xgplayer

# 再安装本组件
npm install dn-file-preview

全局配置

组件内部会通过 Vue.prototype.$fileServer 拼接文件服务器地址，请在 main.js 中配置：

import Vue from 'vue'
import dnFilePreview from 'dn-file-preview'

// 文件服务器地址前缀，会拼接到 fileData.path 之前
Vue.prototype.$fileServer = 'https://your-file-server.com/'

Vue.use(dnFilePreview)

最终预览地址的拼接规则：

• 非 mp4 文件：searchUrl + $fileServer + fileData.path
• mp4 文件：$fileServer + fileData.path（直接交给 xgplayer 播放）

Props 参数

| 属性 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | v-model | 控制弹框是否显示 | Boolean | false | | fileData | 文件信息对象 | Object | 见下表 | | searchUrl | 在线预览服务的地址前缀，由调用方传入 | String | '' |

fileData 属性

| 属性 | 说明 | 类型 | | ---- | ---- | ---- | | name | 文件名称（显示在弹框标题） | String | | path | 文件在文件服务器的相对路径 | String | | contentType | 文件类型，例如 mp4、pdf、docx 等 | String |

使用方式

在 main.js 中全局注册：

import Vue from 'vue'
import dnFilePreview from 'dn-file-preview'

Vue.prototype.$fileServer = 'https://your-file-server.com/'
Vue.use(dnFilePreview)

在页面中使用：

<template>
  <div>
    <button @click="openPreview">预览文件</button>
    <multiFilePreview
      v-model="visible"
      :fileData="filePreview"
      :searchUrl="searchUrl"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      // 由调用方动态传入在线预览服务的地址前缀
      searchUrl: 'https://onlineview.example.com/onlinePreview?url=',
      filePreview: {
        name: '示例文件.pdf',
        path: 'upload/2026/05/demo.pdf',
        contentType: 'pdf'
      }
    }
  },
  methods: {
    openPreview() {
      this.visible = true
    }
  }
}
</script>

更新日志

1.0.1

• searchUrl 不再硬编码默认值，完全由调用方传入，便于在不同环境下灵活配置在线预览服务地址。
• 完善 README 文档（修正 fileData 字段说明，补充 searchUrl、$fileServer 全局配置以及使用示例）。

1.0.0

• 首次发布，支持文件弹框预览与 mp4 视频播放。