Package Exports

vue-doc-viewers-plus
vue-doc-viewers-plus/dist/vue-doc-viewer-plus.es.js
vue-doc-viewers-plus/dist/vue-doc-viewer-plus.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-doc-viewers-plus) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Doc Viewers Plus

一个基于 Vue 3 的文档预览组件，支持 PDF、Office 文档和图片预览。

安装

npm install vue-doc-viewers-plus

使用方法

1. 引入组件和样式

import { DocViewerPlus } from 'vue-doc-viewers-plus'
import 'vue-doc-viewers-plus/dist/style.css'

2. 在模板中使用

<template>
  <doc-viewer-plus
    :file-url="fileUrl"
    :file-name="fileName"
    v-model:visible="visible"
  />
</template>

<script setup>
import { ref } from 'vue'
import { DocViewerPlus } from 'vue-doc-viewers-plus'
import 'vue-doc-viewers-plus/dist/style.css'

const fileUrl = ref('')
const fileName = ref('')
const visible = ref(false)

// 打开预览
const preview = () => {
  fileUrl.value = 'https://example.com/sample.pdf'
  fileName.value = 'sample.pdf'
  visible.value = true
}
</script>

预览效果

PDF 预览

PDF预览

Office 文档预览

Office预览

图片预览

Props

属性名	类型	必填	默认值	说明
fileUrl	string	是	-	文件的 URL 地址
fileName	string	否	-	文件名（用于下载时的文件名）
visible	boolean	否	false	控制预览窗口的显示/隐藏

支持的文件类型

图片

jpg/jpeg
png
gif
bmp
webp

PDF

Office 文档

doc/docx（Word）
xls/xlsx（Excel）
ppt/pptx（PowerPoint）

特性

支持图片预览和缩放
支持 PDF 在线预览
支持 Office 文档在线预览（使用微软 Office Online 服务）
支持文件下载
响应式设计
支持 Vue 3 和 TypeScript

注意事项

Office 文档预览需要文件可以通过公网访问
确保引入了组件样式文件 vue-doc-viewers-plus/dist/style.css

License

MIT