vue-pdf实现pdf文件在线预览

1. 前言

PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件, 大部分的需求还是可以满足的

2. 安装

npm install --save vue-pdf

3. pdf 页面显示

3.1 code

3.2 展示

这个时候, pdf文件已经显示在页面上了, 但是我们可以发现, 这仅仅显示了pdf 文件的第一页

image

4. pdf 显示多页

4.1 code

4.2 展示

image

这时候我们可以通过滑动预览pdf的内容, 但是这种方式是一下子把pdf的内容都加载出来, 页数一多, 浏览器直接卡在加载的状态, 体验感太差,所以我们可以考虑按页加载

5. pdf 按页预览

5.1 code

5.2 展示

image

至此, 大概效果就如上所示

6. 更多内容

npm vue-pdf