前端在线预览PDF文件

前言

这里用到了vue-pdf插件，预览PDF相关的操作基本都有实现；

我们需要做的就是各种布局（因为需兼容已有的布局，有的地方可能需要修改），比如翻页按钮，页码展示等等；

vue-pdf的GitHub地址：FranckFreiburger/vue-pdf: vue.js pdf viewer (github.com)

目录

1. 入门例子
2. 展示所有页码
3. 翻页操作
4. 封装组件
5. 完整代码

正文

1. 入门例子

安装命令：yarn add vue-pdf

最简单的入门例子，如下所示：

展示效果如下所示：

当我们的页码不是很多时，可以采用这种简单粗暴的方式进行展示，很方便；

但是如果页码过多，则不仅看起来很费劲，而且加载也会很慢，这时就需要用到翻页功能；

3. 翻页操作

这里主要增加两个按钮，以及相关属性，下面是部分代码：

    

        上一页
    


    

        下一页
    

• @num-pages 事件：获取pdf的总页数，这里获取到之后传给了pageCount
• page 属性：就是当前页码，这里通过点击上一页和下一页来修改来更新页码

效果如下所示：

完整代码见下面；

4. 封装组件

为了方便使用，我们可以将上面的预览代码封装成功一个单文件组件，然后在需要的地方进行引入即可；

封装后的组件代码贴到文末了，因为有点长：

我们在展示pdf文件时，可以通过跳转到新标签页的方式进行展示，这样组件内的布局不会有太大的变化；

跳转代码如下所示：

let routeUrl = this.$router.resolve({
              path: '/preview-pdf',
              query:{pdfPath}
          })
window.open(routeUrl.href, '_blank')

• /preview-pdf：这个路径就是配置在路由里面的，预览pdf的路径

• pdfPath：这里我们是通过query的方式进行传参，然后在预览组件内通过 this.srcPdf = decodeURIComponent(this.$route.query.pdfPath)进行获取；

  • 因为存在编码问题，所以这里需要加上解码操作；

    如果pdf路径是http远程路径，则不需要解码

5. 完整代码

完整的封装组件如下，这里是参考网上的例子，做了一些修改

如何使用？

先注册路由：src/router/index.js

import MyPdf from '../components/MyPdf'

export default new VueRouter({
    routes: [
            {
                path: '/apply-contract-pdf',
                name: 'apply-contract-pdf',
                component: MyPdf
            },
]})

再通过如下方法进行预览：

previewPdf(pdfPath){
    let routeUrl = this.$router.resolve({
        path: '/preview-pdf',
        query:{pdfPath}
    })
    window.open(routeUrl.href, '_blank')
},

总结

本篇介绍了vue-pdf的一些简单使用，包括首页展示、分页展示等；

其实还有一些进度条展示这里没列出来，感兴趣的可以配合a-progress组件和progress 属性进行体验