vue + vant移动端预览PDF

一、下载依赖

npm install --save vue-pdf

二、页面代码

	<template>
	  <div class="container">
	    <!--预览-->
	    <div class="goback1">
	      <div class="goBtn">
	        <van-nav-bar title="PDF预览" left-arrow @click-left="goBack" />
	      </div>
	    </div>
	    <div>
	      <pdf
	        :src="pdfSrc"
	        :page="currentPage"
	        @num-pages="pageCount=$event"
	        @page-loaded="currentPage=$event"
	        @loaded="loadPdfHandler" >
	      </pdf>
	    </div>
	    <!--页码-->
	    <div class="pdf" v-show="fileType === 'pdf'">
	      <div class="pagesize">
	        <!--上一页-->
	        <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
	        {{currentPage}} / {{pageCount}}
	        <!--下一页-->
	        <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
	      </div>
	    </div>
	  </div>
	</template>
	<script>
	  import pdf from 'vue-pdf'  // 引入pdf组件
	  export default {
	    metaInfo: {
	      title: 'This is the test',
	      meta: [
	        { charset: 'utf-8' },
	        { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
	      ]
	    },
	    components: {pdf},  // 引入pdf组件
	    data () {
	      return {
	        currentPage: 0,       // pdf文件页码
	        pageCount: 0,         // pdf文件总页数
	        fileType: 'pdf',      // 文件类型
	        pdfSrc:'',
	        //pdfSrc: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf' // pdf文
	      }
	    },
	    methods: {
	      // 返回上级
	      goBack(){
	        this.$router.push({
	          name: 'trademarkInquiry'
	        })
	      },
	      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
	      changePdfPage (val) {
	        // console.log(val)
	        if (val === 0 && this.currentPage > 1) {
	          this.currentPage--
	        }
	        if (val === 1 && this.currentPage < this.pageCount) {
	          this.currentPage++
	        }
	      },
	      // pdf加载时
	      loadPdfHandler (e) {
	        this.currentPage = 1 // 加载的时候先加载第一页
	      },
	      getFilePathName(){
	        var _this = this;
	        var params = {
	          FilePathName:this.$route.params.FilePathName
	        }
	        this.$http.get('/api/File/GetFileBase64ByFilePathName',{params})
	        .then(res => {
	          console.log(res)
	          if(res.data.resultcode == 200){
	          	//线上
	              this.pdfSrc = pdf.createLoadingTask(window.location.protocol+'//' +  window.location.host + res.data.result);
              	// 开发
              	// this.pdfSrc = pdf.createLoadingTask("http://192.168.105.42:9090" + res.data.result)
	          }else {}
	
	        })
	        .catch(error => {
	          console.log(error)
	        })
	      }
	
	    },
	    created() {
	      this.getFilePathName();
	    }
	  }
	</script>
	<style lang="scss" scoped>
	 .pdf-box {
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    max-width: 1024px;
	    width: 100%;
	    margin: 0 auto;
	    overflow-x: hidden;
	    height: 100%;
	    overflow-y: auto;
	    -webkit-overflow-scrolling: touch;
	    font-size: .28rem;
	    span {
	      width: 100%;
	    }
	  }
	</style>

三、预览效果