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

那時候我隻有一台錄音機也沒有電腦 也不敢奢求說唱會讓自己的生活變好