vue-pdf结合alloyfinger手势缩放旋转上下翻页pdf文件

1. demo线上链接 vuepdf在线demo

2. demo图:

 

 

3. 话不多说,上代码:

安装vue-pdf插件: npm i vue-pdf
安装vue-pdf报错catch的可以看我这篇文章:
复制代码 www.cnblogs.com/520BigBear/…

AlloyFinger.js传送门 (gitee.com/bigbear520/…)

  <div class="pdf">
    <div class="pdf-tab">
      <div class="btn-def btn-pre" @click.stop="prePage">上一页</div>
      <div class="btn-def btn-next" @click.stop="nextPage">下一页</div>
    </div>
    <!-- loadedRatio==1说明pdf加载完成 -->
    <div class="tips" v-if="loadedRatio == 1">
      {{ pageNum }}/{{ pageTotalNum }}
    </div>
    <div class="tips" v-else>加载中请稍后...</div>
    <!-- vue-pdf显示区域 -->
    <div class="pdfbox">
      <pdf
        :style="{
          transform:
            'translate(' +
            posX +
            'px,' +
            posY +
            'px) translateZ(0px) scale(' +
            dis +
            ')  rotate(' +
            angle +
            'deg)'
        }"
        id="pdfPreview"
        ref="pdf"
        :src="pdfUrl"
        :page="pageNum"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum = $event"
        @link-clicked="page = $event"
      >
      </pdf>
    </div>
  </div>
</template>


<script>
import pdf from 'vue-pdf'
import AlloyFinger from '../libs/alloyfinger'
// vue-pdf说明
// 1.src是pdf文件的路径，可以是相对地址、绝对地址、网址
// 2.:page当前pdf显示的页码，默认是1
// 3.@progress是pdf页面的加载进度（这个不是很懂）
// 4.@loaded  pdf加载的时候执行
// 5.@num-page监听pdf的加载，获取pdf总页数
// 6.@page-loaded是pdf加载成功的回调（应该是范围换页后的页码）
export default {
  components: {
    pdf
  },
  data() {
    return {
      posX: 0,
      posY: 0,
      dis: 1,
      angle: 0,

      pdfUrl:
        'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
      pageNum: 1, //当前页
      pageTotalNum: 1, //总页数
      // 加载进度
      loadedRatio: 0 // 加载进度  loadedRatio==1 加载完成
    }
  },
  mounted() {
    this.getData() //初始化手势数据
  },
  methods: {
    getData() {
      let that = this
      let element = document.getElementById('pdfPreview') // 指定元素
      this.af = new AlloyFinger(element, {
        rotate: function (evt) {
          console.log('实现旋转')
          that.angle += evt.angle
        },
        pinch: function (evt) {
          console.log('实现缩放')
          if (evt.zoom < 0.7) return // 设置最小缩放
          that.dis = evt.zoom
        },
        pressMove: function (evt) {
          console.log('实现移动')
          that.posX += evt.deltaX
          that.posY += evt.deltaY
        },
        tap: function (evt) {
          console.log('单击')
          //点按触发
        },
        doubleTap: function (e) {
          console.log('双击')
          //双击屏幕触发
        },
        longTap: function (e) {
          console.log('长按')
          //长按屏幕750ms触发
        },
        swipe: function (e) {
          //e.direction代表滑动的方向
          console.log('swipe' + e.direction)
        }
      })
    },
    // 上一页下一页重置手势数据
    resetData() {
      this.posX = 0
      this.posY = 0
      this.dis = 1
      this.angle = 0
    },
    // 上一页
    prePage() {
      this.resetData()
      var p = this.pageNum
      p = p > 1 ? p - 1 : this.pageTotalNum
      this.pageNum = p
    },
    // 下一页
    nextPage() {
      this.resetData()
      var p = this.pageNum
      p = p < this.pageTotalNum ? p + 1 : 1
      this.pageNum = p
    }
  }
}
</script>
<style>
body {
  margin: 0;
  padding: 0;
  /* 防止页面被拖动 */
  overflow: hidden;
}
</style>
<style scoped>
.pdf {
  width: 100vw;
  height: 100vh;
  background: #ccc;
}
.pdf-tab {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.4rem;
  justify-content: space-between;
}
.pdf-tab .btn-def {
  border-radius: 0.2rem;
  font-size: 0.98rem;
  height: 1.93333rem;
  width: 6.4rem;
  text-align: center;
  line-height: 1.93333rem;
  background: #409eff;
  color: #fff;
  margin-bottom: 1.26667rem;
}
/* 限定放大hidden范围 */
.pdfbox {
  overflow: hidden;
  padding: 0.2rem;
  box-sizing: border-box;
}
</style>

我的掘金链接  https://juejin.cn/post/7132732171466309662

alloyfinger参考文档: https://www.oschina.net/p/alloyfinger