1. 前言
PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下 vue-pdf 这个组件, 大部分的需求还是可以满足的
2. 安装
npm install --save vue-pdf
3. pdf 页面显示
3.1 code
<template>
<div>
<pdf
ref="pdf"
:src="url"
>
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
data(){
return {
url:"http://image.cache.timepack.cn/nodejs.pdf",
}
}
</script>
3.2 展示
这个时候, pdf文件已经显示在页面上了, 但是我们可以发现, 这仅仅显示了pdf 文件的第一页
image
4. pdf 显示多页
4.1 code
<template>
<div>
<pdf
ref="pdf"
v-for="i in numPages"
:key="i"
:src="url"
:page="i"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
data(){
return {
url:"http://image.cache.timepack.cn/nodejs.pdf",
numPages: null, // pdf 总页数
}
},
mounted() {
this.getNumPages()
},
methods: {
# 计算pdf页码总数
getNumPages() {
let loadingTask = pdf.createLoadingTask(this.url)
loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages
}).catch(err => {
console.error('pdf 加载失败', err);
})
},
}
</script>
4.2 展示
image
这时候我们可以通过滑动预览pdf的内容, 但是这种方式是一下子把pdf的内容都加载出来, 页数一多, 浏览器直接卡在加载的状态, 体验感太差,所以我们可以考虑按页加载
5. pdf 按页预览
5.1 code
<template>
<div>
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
<el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
<pdf
:page="pageNum"
:src="url"
@progress="loadedRatio = $event"
@num-pages="pageTotalNum=$event"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'Pdf',
components: {
pdf,
},
data() {
return {
url: 'http://image.cache.timepack.cn/nodejs.pdf',
pageNum: 1,
pageTotalNum: 1, # 总页数
loadedRatio: 0, # 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
}
},
methods: {
// 上一页
prePage() {
let page = this.pageNum
page = page > 1 ? page - 1 : this.pageTotalNum
this.pageNum = page
},
// 下一页
nextPage() {
let page = this.pageNum
page = page < this.pageTotalNum ? page + 1 : 1
this.pageNum = page
}
}
}
</script>
5.2 展示
image
至此, 大概效果就如上所示
