1.引入vue-pdf（vue-pdf版本：4.3.0，vue版本：2.6.14）
npm install --save vue-pdf
2.引入本地文件（放public文件夹下用于测试。后期用接口返回的地址）
111.pdf：自己随意生成的一个
3.页面按需引入
<script>
import Pdf from "vue-pdf"
export default {components: { Pdf }
}
</script>
4.完整代码
pdfShow.vue
<template><div><div class="tools"><el-button type="primary" @click.stop="prePage">上一页</el-button><el-button type="primary" @click.stop="nextPage">下一页</el-button><el-button type="primary">{{ currentPage }}/{{ pageCount }}</el-button><el-button type="primary" @click.stop="scaleD">放大</el-button><el-button type="primary" @click.stop="scaleX">缩小</el-button></div><div class="pdf"><!-- page当前显示的页数 progress当前页面加载进度，范围0-1，等于1时代表当前页完全加载完成，page-loaded页面加载成功的回调函数 num-pages总页数 --><pdf ref="pdf":src="url":page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage = $event"@loaded="loadPdfHandler"@progress="loadedRatio = $event"></pdf></div></div>
</template><script>
import pdf from 'vue-pdf'
export default {name: 'HelloWorld',components:{pdf,},props: {msg: String},data(){return {// url:"http://221.2.195.94:8072/group1/M00/00/15/DAoMrmT3RvqAc0ifAKewIsM7DXk324.pdf",url:"111.pdf",currentPage:0,//pdf页码pageCount:0,//pdf文件总页数scale:100,//开始的时候默认和容器一样大，即宽高都是1000%navPage:1,//跳转的页数}},mounted(){},methods:{//上一页函数prePage(){if (this.currentPage > 1) {this.currentPage--;}else{this.$message.warning("已经是第一页")}},//下一页函数nextPage(){if (this.currentPage <this.pageCount) {this.currentPage++;}else{this.$message.warning("已经是最后一页")}},//pdf加载loadPdfHandler(){this.currentPage = 1; // 加载的时候先加载第一页this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},//放大scaleD(){if(this.scale == 100){return this.$message.warning("已经是最大咯")}this.scale +=10;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},//缩小scaleX(){if(this.scale == 40){return this.$message.warning("已经是最小咯")}this.scale +=-10;this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%";},}
}
</script>
<style scoped>
</style>
App.vue
<template><div id="app"><!-- <img alt="Vue logo" src="./assets/logo.png"> --><pdfShow style="width: 400px;height: 500px;border: 1px solid #ccc;overflow-y: scroll;" /></div>
</template><script>
import pdfShow from './components/pdfShow.vue'export default {name: 'App',components: {pdfShow}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>main.js
import Vue from 'vue'
import App from './App.vue'// 引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({render: h => h(App),}).$mount('#app')
