安装方式:
npm i --save vue-pdf
1. 使用组件:
<PreViewPdf ref="PreViewPdf"></PreViewPdf>
this.$refs.PreViewPdf.openPdf(item.oss_url)
2. 项目抛出如下错误:
通过查阅vue-pdf的github项目的issue发现也有其他人出现这个问题,解决方案是在自己的项目引入pdfjs-dist依赖包,并指定该包的项目固定为2.5.207,即可解决问问题。(详细问题描述)
但个人认为这是vue-pdf的bug,作者应该后期会修复,pdfjs-dist这个包本身也是可以实现pdf预览的,vue-pdf是在此基础上包一层能力,pdfjs的版本依赖应该是在vue-pdf的package.json去修复指定,我们目前的处理方案就是在自己的项目去强行指定版本,如果后期作者修复或者升级这个包,我们自己项目可能需要同步修改一下。
npm i --save pdfjs-dist@2.5.207
组件代码实现如下:
<template>
<div class="pdf" v-show="visible">
<div class="arrow">
<span class="xiaoicon icon" @click="visible=false;currentPage=0;pageCount=0"></span>
<button @click.stop="scaleX">缩小</button>
<!-- // 上一页 -->
<span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
{{currentPage}} / {{pageCount}}
<!-- // 下一页 -->
<span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
<button @click.stop="scaleD">放大</button>
</div>
<div class="pdfClass"
:style="{
width: scale + '%',
}">
<pdf
ref="wrapper"
:src="pdfSrc"
:page="currentPage"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdfHandler" >
</pdf>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf'
// CMapReaderFactory 解决pdf中文乱码问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
metaInfo: { // 这里是给页面修改
title: '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
]
},
components: {pdf},
data () {
return {
scale: 100,
visible: false,
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
pdfSrc: '' // pdf文件地址
}
},
created() {
// 有时PDF文件地址会出现跨域的情况,这里最好处理一下
if(this.pdfSrc){
this.pdfSrc = pdf.createLoadingTask({url: this.pdfSrc, CMapReaderFactory })
}
},
methods: {
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage (val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage--
console.log(this.currentPage)
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
console.log(this.currentPage)
}
},
// pdf加载时
loadPdfHandler () {
this.currentPage = 1 // 加载的时候先加载第一页
},
openPdf(url){
this.visible = true
this.pdfSrc = pdf.createLoadingTask({url: url, CMapReaderFactory })
},
//放大
scaleD() {
this.scale += 5
},
//缩小
scaleX() {
if (this.scale == 100) {
return
}
this.scale += -5
},
}
}
</script>
<style lang="css" scoped>
.pdf{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
overflow: hidden;
z-index: 200;
}
.arrow{
height: 1.066667rem;
line-height: 1.066667rem;
color: #fff;
text-align: center;
position: relative;
}
.icon{
font-size: .32rem;
color: #fff;
position: absolute;
top: 0;
left: .213333rem;
}
.pdfClass{
overflow: auto;
}
</style>
界面运行效果如下:
缩放效果如下:
如上图效果知道,vue-pdf虽然能是达到在线预览的基本效果,但是存在如下不友好问题,影响用户交互效果:
1. pdf画布没有铺满整个页面;
2. 缩放效果不好,只是在整个容器的基础上进行缩放,字体会变形;
3. 而且缩放之后,超出页面的部分不能滚动,显然不满足用户交互需求
经过查找实践,最后发现pdfh5能达到,满屏和手势缩放的移动端交互效果,实现方式如下。