vue3中使用 vue-pdf-embed 实现pdf文件预览、翻页、下载等功能
一、安装 vue-pdf-embed
1、安装 vue-pdf-embed
yarn add vue-pdf-embed@1.2.1
注:此处安装版本为 1.2.1,2.x 版本安装的依赖包 pdfjs-dist 版本为 3.x 版本。
注:2024.2.16 更新 无需安装 vue3-pdfjs 即可获取文件总页数的方法。
可根据需要安装 yarn add vue3-pdfjs@0.1.6 。
注:此前安装 vue3-pdfjs 是参考了网上的一些教程,主要用于获取文件总页数,后续在 github 上看到 vue-pdf-embed 的作者的留言中发现了新的写法。
二、文件预览
1、html 结构内容
参数说明:
source
:文档来源(支持string
、object
、Uint8Array
类型数据)page
:要显示的页数(如果未指定,则显示所有页)textLayer
:是否应启用文本图层(用于文本选中、复制)
2、css 样式
注:此处主要是对滚动条的样式进行修改,可自由发挥。
3、js 基本预览功能实现
注:
此时已经实现基本的预览功能了(单页)。当 pageNum 的参数为 0 时或不写该参数时展示所有页。
参数 cMapUrl 和 cMapPacked 用于处理一些字体乱码和浏览器控制台关于字体错误的警告。
4、获取文件总页数
在 vue-pdf-embed@2.x 版本中,更新了新的方法:
可以借助 useVuePdfEmbed
方法来获取文件相关的信息。
方法一: vue-pdf-embed@1.2.1
版本获取总页数方法:
注:在 vue-pdf-embed@2.x
版本中,该写法无效。
方法二: 如果安装了 vue3-pdfjs
,则使用以下方法获取总页数:
获取总页数后可用于遍历展示多页:
参考资料:
更多关于 vue-pdf-embed 2.x 版本的信息可参考:https://www.npmjs.com/package/vue-pdf-embed/v/2.0.0
更多关于 vue3-pdfjs 的用法可参考:https://www.npmjs.com/package/vue3-pdfjs
三、翻页
在文件基本预览的基础之上追加相应功能的实现:
html 结构:
js
功能实现:
四、缩放
html
结构:
js
功能实现:
说明:
此处控制的是父容器的缩放,因为在使用 vue-pdf-embed 组件的 scale 参数时发现无法实现动态更改,且 width 参数无法设置成百分比的形式,所以采用修改父容器的方案实现。
在实现放大父容器的过程中发现,容器放大后,高度也应该做相应的修改,否则文件展示会出现展示不全的情况。
注意:如果父容器设置了宽度,此时追加 scale 参数后会出现文件模糊的情况。
五、下载
html 结构:
js
功能实现:
说明:download
方法可传递一个字符串参数作为文件名。
六、打印
html
结构:
js
功能实现:
参数说明:
dpi
:打印分辨率,默认值300
filename
:文件名allPages
:是否打印所有页,默认值false
注意:
文件打印时出现空白页,起初以为是组件本身的问题,后来发现可能是pdf文件的问题。
修改测试文件:
测试后发现并没有出现空白页,因此推测是文件本身的问题。可能需要使用其他方法来完善该功能或是弹出打印对话框时选择——仅奇数页。
七、指定页面跳转
html
结构:
js
功能实现: