Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)

一、使用插件pdfh5预览pdf

参考文档:pdfh5 - npm  

项目相关依赖版本信息

预览效果如下图所示:

Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)_第1张图片

1.上下滚动和缩放查看

2.左上角固定显示当前页码和总页数

3.右下角一键回到顶部按钮

4.在每页pdf上添加图片水印

①安装插件:yarn add pdfh5([email protected]

②使用pdfh5插件预览pdf




二、使用插件vue-pdf预览pdf

相关参考文档:vue-pdf - npm

安装插件:yarn add vue-pdf(@[email protected]

②使用vue-pdf插件在移动端网页进行pdf预览

  1. 一次性加载全部pdf,上下滚动查看pdf(初次加载较慢,交互体验较差)



2.分页加载预览pdf,左上角自定义显示当前页码和总页数,通过监听手指上下(或左右)滑动进行翻页

效果如下图所示:

Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)_第2张图片




3.采用分页预览pdf,包括自定义跳转到指定页数,上一页,下一页按钮(初次加载更快,交互体验更好)

效果如下图:

Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)_第3张图片




你可能感兴趣的:(Vue2,css,vue.js)