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

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__

原文作者： 嘻哈丨大熊
原文链接： https://www.cnblogs.com/520BigBear/p/16595243.html
关于博主： 评论和私信会在第一时间回复。或者直接私信我。
版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主： 如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。