当前位置：首页 > news >正文

实用指南：vue3图片，pdf,word,excel,ppt多格式文件预览组件Vue Doc Viewers Plus

news 2026/5/11 22:45:30

这是一个基于 Vue 3 的多格式文件预览组件，支持 PDF、Office 文档和图片的统一直播预览。以下是详细学习资料：

一、插件简介

vue-doc-viewers-plus 是一个开箱即用的文档预览解决方案，特点包括：

支持多种格式：图片（jpg/png/gif等）、PDF、Office（doc/xls/ppt）
使用微软 Office Online 服务预览Office文档
提供统一的 API 接口，无需为不同格式写不同代码
支持 Vue 3 和 TypeScript

GitHub 仓库：mengtaiqili/vue-doc-viewers-plus

二、快速上手

1. 安装

npm install vue-doc-viewers-plus

2. 基础使用示例


<script setup>
import { ref } from 'vue'
import { DocViewerPlus } from 'vue-doc-viewers-plus'
import 'vue-doc-viewers-plus/dist/style.css'
const visible = ref(false)
const fileUrl = ref('')
const fileName = ref('')
const preview = () => {// 设置要预览的文件URLfileUrl.value = 'https://example.com/sample.pdf'fileName.value = 'sample.pdf'// 打开预览窗口visible.value = true
}
</script>

三、API 详解

Props 参数

属性名	类型	必填	默认值	说明
fileUrl	string	是	-	文件的 URL 地址（公网可访问）
fileName	string	否	-	文件名，用于下载时的默认文件名
visible	boolean	否	false	使用 `v-model:visible` 双向绑定控制预览窗口显示/隐藏

事件

update:visible: 预览窗口状态变化时触发

四、支持的文件类型

图片格式

jpg/jpeg
png
gif
bmp
webp

文档格式

七、与其他方案对比

Q: Office 文档预览失败？ A: 检查文件是否可以通过公网直接访问，内网文件无法使用微软 Office Online 服务预览。

Q: 如何控制预览窗口的样式？ A: 可以通过覆盖组件的 CSS 类名实现自定义样式，具体类名可参考源码。

Q: 支持 Vue 2 吗？ A: 该插件专为 Vue 3 设计，Vue 2 项目建议使用 vue-office 或其他兼容方案。

通过以上学习资料，你可以快速掌握 vue-doc-viewers-plus 的使用方法。建议先从基础示例开始，逐步应用到实际项目中。

九、常见问题

PDF: .pdf
Word: .doc/.docx
Excel: .xls/.xlsx
PowerPoint: .ppt/.pptx
五、完整实战示例


<script setup>
import { ref } from 'vue'
import { DocViewerPlus } from 'vue-doc-viewers-plus'
import 'vue-doc-viewers-plus/dist/style.css'
// 文件列表数据
const fileList = ref([{ id: 1, name: '产品文档.pdf', url: 'https://example.com/product.pdf' },{ id: 2, name: '报表.xlsx', url: 'https://example.com/report.xlsx' },{ id: 3, name: '设计图.png', url: 'https://example.com/design.png' }
])
// 预览状态
const previewVisible = ref(false)
const currentFile = ref({ url: '', name: '' })
// 预览处理函数
const handlePreview = (file) => {currentFile.value = {url: file.url,name: file.name}previewVisible.value = true
}
</script>

六、关键注意事项

Office 文档预览要求：文件必须能通过公网访问，因为依赖微软 Office Online 服务
样式引入：必须引入组件样式文件 vue-doc-viewers-plus/dist/style.css，否则预览窗口样式会错乱
响应式设计：组件默认支持响应式，预览窗口会自动适应不同屏幕尺寸

七、与其他方案对比

方案	优点	缺点
vue-doc-viewers-plus	统一API、支持多格式、使用简单	Office文档需公网访问
vue-office	纯前端渲染、不依赖外部服务	需分别安装不同格式组件
iframe	简单直接	体验差、安全性低、功能有限
v-viewer + vue-pdf	功能强大、可深度定制	需组合使用、配置复杂