功能描述
最近在项目开发中,客户有这样一个需求:在线预览上传上去的PDF文件,之前没接触过这块,通过查阅资料,发现有个PDF预览组件,只需要引入进来就可以,下面来进入到干货模式!!!
前端代码
第一步
在components下创建PdfView文件夹,并创建一个.vue文件
第二步
将下面的代码复制到(index.vue).vue文件里,
<template>
<div style="background-color: #FFFFFF;width: 100%;margin: 0 auto;">
<pdf
:page="pageNum"
:src="url"
@progress="loadedRatio = $event"
@num-pages="pageTotalNum=$event"
></pdf>
<br>
<el-button-group style="position: relative;top: 8%;left: 43%;transform: translate(-50%,-50%);">
<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;text-align: center;">{{ pageNum }} / {{ pageTotalNum }}</div>
<br>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'Pdf',
components: {
pdf,
},
props: {
url: {
type: String,
default: ''
},
},
data() {
return {
pageNum: 1,
pageTotalNum: 1, //总页数
loadedRatio: 0, //当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了
}
},
created() {
console.log(this.url,"pdf")
},
methods: {
// 上一页
prePage() {
let page = this.pageNum
page = page > 1 ? page - 1 : this.pageTotalNum
this.pageNum = page
document.getElementById("pdfId").scrollIntoView();
},
// 下一页
nextPage() {
//找到元素 scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内
let page = this.pageNum
page = page < this.pageTotalNum ? page + 1 : 1
this.pageNum = page
document.getElementById("pdfId").scrollIntoView();
}
}
}
</script>
第三步
在需要使用这个组件的.vue文件里注入进来,
注意
引入的路径是否正确,这段代码我就不贴出来了,自行写一下就可以,一共就两行。
第四步
重点:
使用pdf组件
解释
filePreviewModal:是否显示的意思,定义这么一个全局变量即可,默认为false不显示。
filePreviewUrl:文件地址。
<a @click="filePreview(record)" v-if="roleCOde=='admin'">预览</a>
<j-modal :visible='filePreviewModal' :width='1400' cancelText='关闭' switchFullscreen title="预览" @cancel="filePreviewModal = false">
<template>
<div>
<pdfView :url="filePreviewUrl" style="width: 600px;height: 900px;"></pdfView>
</div>
</template>
<template slot="footer">
<div>
<a-button type="white" @click="filePreviewModal = false">关闭</a-button>
</div>
</template>
</j-modal>
filePreviewUrl:上传文件的地址+文件名
filePreview(record){
this.filePreviewUrl = 'http://'+record.document
this.filePreviewModal = true
},
结束语
有兴趣的博主们可以关注一下,后期会经常分享在项目开发中遇到一些新的功能以及处理的Bug会及时更新在本博主的主页中哦!!!