安装方式：

npm i --save vue-pdf

​​​​​​​1. 使用组件：

    <PreViewPdf ref="PreViewPdf"></PreViewPdf>

     this.$refs.PreViewPdf.openPdf(item.oss_url)

 2. 项目抛出如下错误：

通过查阅vue-pdf的github项目的issue发现也有其他人出现这个问题，解决方案是在自己的项目引入pdfjs-dist依赖包，并指定该包的项目固定为2.5.207，即可解决问问题。（详细问题描述）

但个人认为这是vue-pdf的bug，作者应该后期会修复，pdfjs-dist这个包本身也是可以实现pdf预览的，vue-pdf是在此基础上包一层能力，pdfjs的版本依赖应该是在vue-pdf的package.json去修复指定，我们目前的处理方案就是在自己的项目去强行指定版本，如果后期作者修复或者升级这个包，我们自己项目可能需要同步修改一下。

npm i --save pdfjs-dist@2.5.207

组件代码实现如下：

<template>
<div class="pdf" v-show="visible">
    <div class="arrow">
      <span class="xiaoicon icon" @click="visible=false;currentPage=0;pageCount=0">&#xe653;</span>
      <button @click.stop="scaleX">缩小</button>
      <!-- // 上一页 -->
      <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
      {{currentPage}} / {{pageCount}}
      <!-- // 下一页 -->
      <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
      <button @click.stop="scaleD">放大</button>
    </div>
    <div class="pdfClass"
          :style="{
        width: scale + '%',
      }">
      <pdf
        ref="wrapper"
        :src="pdfSrc"
        :page="currentPage"
        @num-pages="pageCount=$event"
        @page-loaded="currentPage=$event"
        @loaded="loadPdfHandler" >
      </pdf>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
// CMapReaderFactory 解决pdf中文乱码问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  metaInfo: {   //  这里是给页面修改
    title: '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
    ]
  },
  components: {pdf},
  data () {
    return {
      scale: 100,
      visible: false,
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      pdfSrc: ''    // pdf文件地址
    }
  },
  created() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    if(this.pdfSrc){
      this.pdfSrc = pdf.createLoadingTask({url: this.pdfSrc, CMapReaderFactory })
    }
  },
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage (val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
        console.log(this.currentPage)
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
        console.log(this.currentPage)
      }
    },
    // pdf加载时
    loadPdfHandler () {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    openPdf(url){
      this.visible = true
      this.pdfSrc = pdf.createLoadingTask({url: url, CMapReaderFactory })
    },
    //放大
    scaleD() {
      this.scale += 5
    },

    //缩小
    scaleX() {
      if (this.scale == 100) {
        return
      }
      this.scale += -5
    },
  }
}
</script>

<style lang="css" scoped>
.pdf{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  z-index: 200; 
}
.arrow{
  height: 1.066667rem;
  line-height: 1.066667rem;
  color: #fff;
  text-align: center;
  position: relative;
}
.icon{
  font-size: .32rem;
  color: #fff;
  position: absolute;
  top: 0;
  left: .213333rem;
}
.pdfClass{
  overflow: auto;
}

</style>

 界面运行效果如下：

缩放效果如下：

如上图效果知道，vue-pdf虽然能是达到在线预览的基本效果，但是存在如下不友好问题，影响用户交互效果：

1. pdf画布没有铺满整个页面；

2. 缩放效果不好，只是在整个容器的基础上进行缩放，字体会变形；

3. 而且缩放之后，超出页面的部分不能滚动，显然不满足用户交互需求

 经过查找实践，最后发现pdfh5能达到，满屏和手势缩放的移动端交互效果，实现方式如下。​​​​​​​