前端实现pdf预览功能的全过程(基于vue)
作者：多多的小宝贝
这篇文章主要给大家介绍了关于前端实现pdf预览功能的相关资料,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言：
项目中之前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>最终测试，该方案可以。
总结
到此这篇关于前端实现pdf预览功能的文章就介绍到这了,更多相关前端实现pdf预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！