功能描述
最近在项目开发中，客户有这样一个需求：在线预览上传上去的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会及时更新在本博主的主页中哦！！！
