vue-pdf手机查看

git地址

https://github.com/FranckFreiburger/vue-pdf#readme

安装

//cnpm 镜像也行
npm install --save vue-pdf

实现

预览

只有预览作用（查看当前pdf第一页）

 <!-- .vue代码 -->
 <template>
 <!-- 导入后使用pdf标签，src:pdf所在位置 -->
  <pdf src="./static/relativity.pdf"></pdf>
 </template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  }
}

查看全部pdf

<template>
  <div>
    <div class="pdf">
       <p class="zhong">
           <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">
           <el-button type="primary">上一页</el-button></span>
            {{currentPage}} / {{pageCount}}
           <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">
           <el-button type="primary">下一页</el-button></span>
       </p>
       <pdf :src="src"
            :page="currentPage"
            @num-pages="pageCount=$event"
            @page-loaded="currentPage=$event"
            @loaded="loadPdfHandler"
       ></pdf>
  </div>
    
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: '',
  components: {
    pdf
  },

  data () {
    return {
      pdfUrl:'',
      currentPage:0,
      src:'',
      pageCount:0,
			numPages: undefined,
    }
  },
  mounted() {
    //我用手机开的热点 192.168.43.107是ip,8888本地测试的端口号
    var qianurl="http://192.168.43.107:8888/resources/"
    //this.$route.query.keyY ->请求地址的参数值，参数名:keyY
    this.pdfUrl = qianurl+this.$route.query.keyY
    //第一页
    this.currentPage = 1;
    this.src = pdf.createLoadingTask(this.pdfUrl)
	
	},
  methods: {
   changePdfPage (val) { //翻页 
     if (val === 0 && this.currentPage > 1) {
         this.currentPage--
      }
     if (val === 1 && this.currentPage < this.pageCount) {
         this.currentPage++

      }
},
   // pdf加载时
     loadPdfHandler (e) {
       this.currentPage = 1 // 加载的时候先加载第一页
     }
  }
}
</script>

<style scoped>
 .zhong{
   text-align: center
 }
</style>

效果图片

参考链接

1.https://www.npmjs.com/package/vue-pdf
2.https://cnpmjs.org/package/vue-pdf