type
status
date
slug
summary
tags
category
icon
password
一、项目初始化与依赖安装
首先，我们创建一个标准的Vue3项目。假设你已经熟悉Vue CLI或Vite的创建流程。
接下来，我们将核心功能封装成一个独立的PDF预览组件，并在
App.vue (或你的目标页面) 中引入和使用它。为了实现PDF预览，我们将采用
vue-pdf-embed 这个优秀的插件。大家可以通过以下链接查看其详细文档和源码：
vue-pdf-embed GitHub仓库在项目创建完毕后，通过npm或yarn安装依赖：
二、封装PDF预览组件 (PdfViewer.vue)
我们创建一个名为
PdfViewer.vue 的组件，用于承载PDF预览和相关操作的逻辑。(项目结构示意图：创建组件文件)
在这个组件中，我们通过
props 接收父组件传递过来的PDF文件URL。(PdfViewer.vue 接收 props 代码示意图)
三、功能分析与界面布局
我们需要实现的核心功能包括：
- PDF内容展示：在页面中清晰渲染PDF。
- 分页控制：对于多页PDF，提供上一页、下一页功能。
- 缩放控制：允许用户放大或缩小PDF视图。
- 打印：调用浏览器打印功能。
- 下载：允许用户下载PDF文件。
(功能需求分析示意图)
基于这些功能，我们先搭建基础的HTML结构，然后逐步实现各项交互。
(HTML基础布局示意图)
假设我们已经在父组件中准备好了PDF文件的URL，并将其传递给
PdfViewer 组件。四、核心功能实现
1. 引入插件并定义响应式数据
在
PdfViewer.vue 的 <script setup> 部分：(定义响应式数据和引入插件的代码示意图)
2. PDF加载与Loading效果
PDF加载可能需要一些时间，因此添加一个loading提示可以改善用户体验。
(添加Loading效果的模板代码示意图)
我们使用
watchEffect 来在PDF总页数 (state.numPages) 确定后（即加载完成后）隐藏loading。更准确的做法是在 @loaded 事件回调中设置。(Loading逻辑与获取总页数代码示意图，结合了
loaded事件)现在，我们的PDF应该可以正常显示了。
(页面正常显示PDF的截图)
3. 实现上一页、下一页功能
在模板中添加按钮，并编写对应的处理函数：
(翻页功能代码示意图)
4. 实现放大、缩小功能
添加缩放按钮，并通过计算属性动态改变
VuePdfEmbed 组件的样式。(缩放功能相关代码 - JS部分)
(将scaleStyle绑定到VuePdfEmbed的style属性上的示意图)
现在，放大缩小功能也已就绪。
5. 实现打印功能
vue-pdf-embed 提供了 print 方法。我们需要获取组件实例来调用它。(打印功能ref绑定示意图)
(打印功能实现效果示意图)
6. 实现下载功能
同样，
vue-pdf-embed 也提供了 download 方法。- 作者:90_blog
- 链接:https://blog.tri7e.com/article/vue3_pdf
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
