vuepdf文件在线预览

原标题：vue-pdf文件在线预览

提示：记录一下vue-pdf使用方法，避免忘记，便于后面使用

提示：以下是本篇文章正文内容，下面案例可供参考

npm install --save vue-pdf


二、pdf 页面显示

1.html

<template>
<div class="pdf-box">
//pdf展示
<pdf
class="pdf"
:page="pageNum"
:src="pdfForm.url"
@progress="loadedRatio = $event"
@num-pages="pageTotalNum = $event"
www.yii666.com ></pdf>
//页码切换
<div class="page-box">
<el-button-group>
www.yii666.com <el-button
type="primary"
文章来源地址49545.htmlico文章来源地址49545.htmln="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
>&文章来源站点https://www.yii666.com/lt;/el-button>
</el-button-group>
//页码展示
<div style=" color: #409EFF;display: flex;justify-content: flex-end;">
{{ pageNum }} / {{ pageTotalNum }}
</div>
</div>
</div>
</template>


2.Javascript

<script>
import pdf from 'vue-pdf'
export default {
name: 'pdf',
components: { pdf },
data () {
pdfForm: { url: '' },
// 查看pdf
url:'',
pageNum: 1,
pageTotalNum: 1, // 总页数
loadedRatio: 0 // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
},
method:{
// 上一页
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>


效果图

记录一下vue-pdf使用方法，避免忘记，便于后面有机会使用

来源于：vue-pdf文件在线预览