witPdfViewer PDF 查看器
witPdfViewer 是一个基于 vue-pdf-embed 封装的 PDF 文档查看器组件，提供了完整的 PDF 文档浏览功能，包括页面导航、缩放、打印和下载等操作。组件采用现代化的 UI 设计，支持加载状态显示和自定义样式，适用于各种需要在线查看 PDF 文档的场景。
用法实例
vue
<template>
<div style="height: 600px; width: 100%;">
<witPdfViewer
:pdf-url="pdfUrl"
:pdf-name="pdfName"
:border="true"
/>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const pdfUrl = ref('https://example.com/sample.pdf')
const pdfName = ref('示例文档.pdf')
</script>API
组件
| 组件名 | 描述 |
|---|---|
witPdfViewer | PDF 查看器主组件 |
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
pdfUrl | String | '' | PDF 文档的 URL 地址 |
pdfName | String | '' | PDF 文档的文件名（用于下载） |
border | Boolean | false | 是否显示边框 |
方法
| 方法名 | 描述 | 参数类型 |
|---|---|---|
pageZoomOut | 放大 PDF 文档 | - |
pageZoomIn | 缩小 PDF 文档 | - |
prevPage | 跳转到上一页或第一页 | isFirst: Boolean |
nextPage | 跳转到下一页或最后一页 | isEnd: Boolean |
handlePrint | 打印 PDF 文档 | - |
handleDownLoad | 下载 PDF 文档 | - |
事件
| 事件名 | 描述 | 参数 |
|---|---|---|
loaded | PDF 文档加载完成时触发 | PDF 文档对象 |
功能特性
页面导航
- 支持单页向前/向后翻页
- 支持直接跳转到第一页或最后一页
- 显示当前页码和总页数
- 页码区域居中显示，方便用户查看和操作
缩放控制
- 支持放大/缩小 PDF 文档
- 实时显示当前缩放比例
- 缩放范围限制在 60% - 200%
- 缩放操作带有平滑过渡动画
文档操作
- 支持打印 PDF 文档（通过 iframe 实现）
- 支持下载 PDF 文档
- 提供直观的操作图标按钮
UI 设计
- 现代化的控制面板设计
- 支持加载状态显示（使用 Element Plus loading 组件）
- 支持自定义边框样式
- 响应式布局，适应不同尺寸的容器
TIP
- 组件基于
vue-pdf-embed实现 PDF 渲染，需要确保该依赖已正确安装。 - PDF 文档 URL 必须支持跨域访问，否则可能无法正常加载。
- 打印功能通过隐藏的 iframe 实现，确保浏览器允许弹出打印对话框。
- 组件内部使用了固定的宽高比（0.749）来计算 PDF 文档的初始宽度，适应不同屏幕尺寸。
- 缩放操作会影响整个 PDF 容器的大小，确保父容器有足够的空间来显示放大后的内容。