vue中运用vue-pdf实现pdf分页预览及缩放(可解决pdf预览不清晰问题)

场景：前端在实现pdf预览时，需要实现分页预览和缩放功能，同时需要保证pdf的清晰度。

但因为种种原因，不可以接通过iframe标签将pdf文件引入，让用户直接使用浏览器自带的pdf预览的相关工具。而是需要自己通过代码实现上述两个功能。

注：若可以直接使用iframe引入 是比较简单的 关于iframe直接引入的方式可见这里

vue中前端实现pdf预览（含vue-pdf插件用法）https://blog.csdn.net/m0_71537867/article/details/129918181

实现效果：

本次封装的组件的实现效果展示如下

实现思路：

1. 使用vue-pdf插件来实现预览功能。

2. 上一页/下一页按钮的点击事件中，改变当前当页码，实现翻页功能。

3. 缩放按钮的点击事件中，改变pdf预览插件所在容器的css样式-----transform:scale（），实现缩放功能。

注： 也曾试过直接去改变pdf预览插件所在容器的宽度来实现缩放效果，这种实现方案较为简单，动态改变容器的width就可以。但是若pdf的内容中主要是文字，就会出现文字清晰度不够的问题。哈哈哈 残酷！

实现步骤：

1.  安装依赖

npm install --save vue-pdf

2. 在需要的页面，引入插件

import pdf from 'vue-pdf'

3. 组件封装完整代码展示

html部分

JS部分

css部分

至此，pdf预览组件就已经愉快的封装完毕。在需要的地方将本组件引入并传入获取到的pdf预览地址，同时按需给本组件引入到的外层容器设置高度，即可实现pdf的翻页预览、缩放效果。