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/…)

  
class="pdf">
    
class="pdf-tab">
      
class="btn-def btn-pre" @click.stop="prePage">上一页
      
class="btn-def btn-next" @click.stop="nextPage">下一页
    
    
    
class="tips" v-if="loadedRatio == 1">
      {{ pageNum }}/{{ pageTotalNum }}
    
    
class="tips" v-else>加载中请稍后...
    
    
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"
      >
      
    
  

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

__EOF__