前言:项目中之前pdf预览是客户端andrio实现的,现在需要前端H5自己实现预览功能,项目是基于vue的H5项目,记录一下pdf预览功能实现的过程和问题
一、利用iframe实现pdf预览
1、实现过程
将pdf路径设置给iframe的src属性
<iframe :src="pdfUrl" marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" style="width: calc(100% + 17px); height: calc(100% + 17px)"></iframe>
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
引入并使用
<template> <div class="pdf-container"> <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf> </div></template><script>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.numPages console.log(' this.numPages', this.numPages) }).catch(err => { debugger console.error('pdf 加载失败', err) }) } }}</script>
部署到测试线app中测试还是存在空白页问题,于是换成插件pdfH5
三、pdfH5实现预览
下包
npm i pdfh5
代码实现
<template> <div class="pdf-container"> <div id="pdf-content"></div> <iframe v-if="docType!='pdf'" :src="pdfUrl" marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" style="width: calc(100% + 17px); height: calc(100% + 17px)"></iframe> </div></template><script>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 + '毫秒') }) } }}</script><style scoped>.pdfjs { height: 100vh !important;}.pdf-container { width: 100%; height: 100%;}</style>
最终测试,该方案可以。