🌐 实时在线演示 (Live Demo)

👉 直接在线点击体验：https://milesmading.github.io/vue2-file-preview/

✨ 核心特性 (v1.1.0)

• ⚡ 零后端依赖：所有 Word、Excel、PDF、PPT、XMind、Mermaid、Markdown 解析在前端浏览器端完成。
• 🧠 XMind 脑图支持：原生支持 .xmind 思维导图解包、节点树渲染与交互。
• 📊 Mermaid 图表支持：支持 Flowchart 流程图、Sequence 时序图、Class 类图等渲染。
• 🎯 Vue 2 原生适配：完全兼容 Vue 2.6 与 Vue 2.7，支持 Options API 与老旧 Webpack 4 / Node 14 项目环境。
• 🔍 丰富交互控制：支持鼠标滚轮平滑缩放、画布拖拽、全屏查看、旋转等。
• 🎨 主题与多语言：支持深浅主题切换、中英文国际化、Vue 插槽自定义扩展。

📊 格式支持一览

| 文件格式 | 扩展名 | 功能支持 | | :--- | :--- | :--- | | 思维导图 | .xmind | 原生思维导图树状层级渲染与交互 | | Mermaid 图表 | .mmd, .mermaid | 流程图、时序图、甘特图等渲染 | | Microsoft Word | .docx, .doc | 排版、标题、段落、表格样式渲染 | | Microsoft Excel | .xlsx, .xls, .csv | 多 Sheet 切换、行列数据渲染 | | Microsoft PowerPoint| .pptx, .ppt | 多页 Slide 切换、键盘翻页 | | PDF 文档 | .pdf | 多页 Canvas 逐页渲染与比例缩放 | | Markdown 笔记 | .md | Markdown 渲染与代码高亮 | | 文本 / 代码 / JSON | .txt, .json, .js | 代码高亮与 JSON 格式化 | | 图像与音视频 | .png, .jpg, .svg, .mp4, .mp3 | 图片缩放/旋转、音视频播放 |

📦 安装指南

npm install vue2-file-previewer

🚀 快速上手 (Vue 2)

1. 全局引入 (main.js)

import Vue from 'vue'
import App from './App.vue'
import Vue2FilePreviewer from 'vue2-file-previewer'
import 'vue2-file-previewer/dist/style.css'

Vue.use(Vue2FilePreviewer)

new Vue({
  render: h => h(App)
}).$mount('#app')

2. 在组件中使用

<template>
  <div style="height: 650px;">
    <VueFilePreview 
      :src="fileUrl" 
      fileName="思维导图.xmind"
      theme="dark"
      locale="zh-CN"
    >
      <!-- 自定义扩展按钮 -->
      <template #toolbar-right>
        <button @click="download">📥 下载</button>
      </template>
    </VueFilePreview>
  </div>
</template>

<script>
import { VueFilePreview } from 'vue2-file-previewer'
import 'vue2-file-previewer/dist/style.css'

export default {
  components: {
    VueFilePreview
  },
  data() {
    return {
      fileUrl: 'https://example.com/demo.xmind'
    }
  },
  methods: {
    download() {
      window.open(this.fileUrl)
    }
  }
}
</script>

📄 开源协议

本项目基于 MIT License 协议开源。