前端实现pdf预览

前言：项目中之前pdf预览是客户端andrio实现的，现在需要前端H5自己实现预览功能，项目是基于vue的H5项目，记录一下pdf预览功能实现的过程和问题

一、利用iframe实现pdf预览

1、实现过程

将pdf路径设置给iframe的src属性

create(){//路由路径上获取pdf路径参数 var extension = this.$route.query.pdfSrc.split('.').pop().toLowerCase()console.log(extension, 'extensionextension')if (extension == 'pdf') {this.pdfSrc = `${this.$route.query.pdfSrc}#toolbar=0`} else {this.pdfSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc}}

2、遇到的问题

电脑上测试正常，但是安卓端会出现空白页和直接跳转下载的现象，解决思路：客户端同事推荐用pdf.js,然后在网上查找发现，vue有一个插件vue-pdf,是基于pdf.js封住的，因此决定采用插件vue-pdf实现

二、vue-pdf插件实现预览

1、实现过程

下包

npm i vue-pdf

引入并使用

import pdf from 'vue-pdf'export default {data () {return {pdfSrc: '',numPages: null}},components: {pdf},computed: {},created () {var extension = this.$route.query.pdfSrc.split('.').pop().toLowerCase()if (extension == 'pdf') {this.pdfSrc = `${this.$route.query.pdfSrc}#toolbar=0`} else {this.pdfSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc}}},mounted () {this.getNumPages()},methods: {getNumPages () {const loadingTask = pdf.createLoadingTask(this.pdfSrc)loadingTask.promise.then(pdf => {this.numPages = pdf.numPagesconsole.log(' this.numPages', this.numPages)}).catch(err => {debuggerconsole.error('pdf 加载失败', err)})}}}

部署到测试线app中测试还是存在空白页问题，于是换成插件pdfH5

三、pdfH5实现预览

下包

npm i pdfh5

代码实现

import Pdfh5 from 'pdfh5'import 'pdfh5/css/pdfh5.css'export default {name: 'Pdfh5',data () {return {docType: '',pdfh5: null,// 可引入网络文件或者本地文件pdfUrl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf' // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）}},mounted () {this.docType = this.$route.query.pdfSrc.split('.').pop().toLowerCase()if (this.docType == 'pdf') {this.initPdf()} else {this.pdfUrl = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc}},methods: {initPdf () {// pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件// pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印this.pdfh5 = new Pdfh5('#pdf-content', {pdfurl: this.$route.query.pdfSrc,goto: 1// 设置每一页pdf上的水印// logo: { src: require('@/assets/images/bus/icon_head@2x.png'), x: 420, y: 700, width: 120, height: 120 }})this.pdfh5.scrollEnable(true) // 允许pdf滚动// 监听pdf准备开始渲染，此时可以拿到pdf总页数this.pdfh5.on('ready', function () {console.log('总页数:' + this.totalNum)})// 监听pdf加载完成事件，加载失败、渲染成功都会触发this.pdfh5.on('complete', (status, msg, time) => {console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')})}}}.pdfjs {height: 100vh !important;}.pdf-container {width: 100%;height: 100%;}

最终测试，该方案可以。