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

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

news 2025/8/2 5:49:13

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

概述

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

安装vue-pdf-embed插件

npm install vue-pdf-embed

组件结构

1. 模板结构

<template><div class="pdf-preview"><div class="pdf-content"><vue-pdf-embed :source="state.source" :style="scaleFun" :page="state.pageNum" class="vue-pdf-embed"@loaded="handlePdfLoaded" /></div><div class="page_tool"><div class="page_tool-item" @click="lastPage">上一页</div><div class="page_tool-item" @click="nextPage">下一页</div><div class="page_tool-item">{{ state.pageNum }}/{{ state.numPages }}</div><div class="page_tool-item" @click="pageZoomOut">放大</div><div class="page_tool-item" @click="pageZoomIn">缩小</div></div></div>
</template>

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的响应式系统，避免不必要的重渲染
计算属性缓存，提高性能
合理的缩放范围限制

使用方式

<template><PdfPreview :pdfUrl="pdfUrl" />
</template><script setup>
import PdfPreview from '@/components/PdfPreview.vue'const pdfUrl = ref('path/to/document.pdf')
</script>

查看全文

http://www.dtcms.com/a/309406.html