vue3使用vue-pdf-embed实现前端PDF在线预览

Vue3 + vue-pdf-embed 实现PDF预览组件开发实践

概述

在现代Web应用中，PDF文档预览是一个常见的功能需求。本文将详细介绍如何使用Vue3 + TypeScript开发一个功能完整的PDF预览组件，包括页面切换、缩放控制等核心功能。

安装vue-pdf-embed插件

npm install vue-pdf-embed

组件结构

1. 模板结构

 
 
  
 
 
上一页
 
下一页
 
{{ state.pageNum }}/{{ state.numPages }}
 
放大
 
缩小
 
 

2. 状态管理

使用Vue3的ref来管理组件状态：

const state = ref({ source: props.pdfUrl, // 预览pdf文件地址 pageNum: 1, // 当前页面 scale: 1,  // 缩放比例 numPages: 0, // 总页数});

3. 计算属性

使用computed来处理动态样式：

const scaleFun = computed(() => ({ transform: `scale(${state.value.scale})`, width: \'100%\', height: \'auto\'}));

核心功能实现

1. 页面切换功能

function lastPage() { if (state.value.pageNum > 1) { state.value.pageNum -= 1; }}function nextPage() { if (state.value.pageNum < state.value.numPages) { state.value.pageNum += 1; }}

设计要点：

• 添加边界检查，防止页码越界
• 确保页码在有效范围内

2. 缩放控制功能

function pageZoomOut() { if (state.value.scale < 2) { state.value.scale += 0.1; }}function pageZoomIn() { if (state.value.scale > 1) { state.value.scale -= 0.1; }}

设计要点：

• 设置缩放范围：最小1倍，最大2倍
• 每次缩放步长为0.1
• 防止过度缩放影响用户体验

3. PDF加载事件处理

我看网上有很多使用这段代码来加载pdf页数，但我实际使用时发现无法正常加载PDF。有了解情况的兄弟能帮忙解答一下吗？

// const loadingTask = createLoadingTask(state.value.source)// loadingTask.promise// .then((pdf: { numPages: number }) => {// state.value.numPages = pdf.numPages;// })// .catch((error: any) => {// console.error(\"PDF 加载失败:\", error);// });

使用 vue-pdf-embed 的自定义事件 来处理pdf页数，

const handlePdfLoaded = (pdf: { numPages: number }) => { state.value.numPages = pdf.numPages;};

样式设计

1. 容器布局

.pdf-preview { position: relative; height: 100%; width: 100%; box-sizing: border-box; background-color: #e9e9e9; overflow: hidden;}

2. PDF内容区域

.pdf-content { height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}.vue-pdf-embed { text-align: center; width: 515px; border: 1px solid #e5e5e5; margin: 0 auto; box-sizing: border-box;}

3. 工具栏设计

.page_tool { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); padding: 8px 15px; display: flex; align-items: center; background: rgb(66, 66, 66); color: white; border-radius: 19px; z-index: 100; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}.page_tool-item { padding: 8px 15px; padding-left: 10px; cursor: pointer; user-select: none;}.page_tool-item:hover { background-color: rgba(255, 255, 255, 0.1); border-radius: 4px;}

技术亮点

1. 响应式设计

• 使用CSS3的transform: scale()实现缩放
• 保持PDF内容居中显示
• 工具栏固定在底部，不随内容滚动

2. 用户体验优化

• 工具栏半透明背景，不影响内容阅读
• 按钮悬停效果，提供视觉反馈
• 页码显示，让用户了解当前位置

3. 性能考虑

• 使用Vue3的响应式系统，避免不必要的重渲染
• 计算属性缓存，提高性能
• 合理的缩放范围限制

使用方式

 import PdfPreview from \'@/components/PdfPreview.vue\'const pdfUrl = ref(\'path/to/document.pdf\')