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">
: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: {
},
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>
vue-pdf结合alloyfinger手势缩放旋转上下翻页pdf文件的更多相关文章
- linux less-分屏上下翻页浏览文件内容
博主推荐:获取更多 linux文件内容查看命令 收藏:linux命令大全 less命令的作用与more十分相似,都可以用来浏览文字档案的内容,不同的是less命令允许用户向前或向后浏览文件,而more ...
- rlwrap-0.37.tar.gz实现sqlplus上下翻页
1.上传rlwrap-0.37.tar.gz到linux 2.解压rlwrap-0.37.tar.gz [root@node1 mnt]# tar zxvf rlwrap-0.37.tar.gz [r ...
- linux中使sqlplus能够上下翻页
安装包链接:https://pan.baidu.com/s/1WsQTeEQClM88aEqIvNi2ag 提取码:s241 rlwrap-0.37-1.el6.x86_64.rpm 和 rlwra ...
- Oracle管理监控之rlwrap-0.37.tar.gz实现sqlplus上下翻页
1.上传rlwrap-0.37.tar.gz到linux 2.解压rlwrap-0.37.tar.gz [root@node1 mnt]# tar zxvf rlwrap-0.37.tar.gz [r ...
- linux vi编辑器中,如何通过快捷键上下翻页?
需求说明: 之前在vi的时候,如果想看下一页,就直接按住 ↓ 这个箭头一直翻,现在觉得有些麻烦, 就找了下上,下翻页的快捷方式.在此记录下. 记录: 1.向下翻页快捷键(下一页):Ctrl + f 2 ...
- rlwrap插件,实现sqlplus上下翻页
oracle在Linux下,sqlplus中不能上下翻,最主要我经常打错字!嘿嘿 01.下载 RPM :http://rpmfind.net/linux/rpm2html/search.php?qu ...
- iOS实现pdf文件预览,上下翻页、缩放,读取pdf目录
最近有个朋友想做一个pdf预览,要求能够上下滑动翻页.带缩放.目录跳转功能. 因为之前我只做过简单的预览,那时直接用uiwebview实现的,这次找了下资料,发现一个比较好的库. 其原理实现: 自定义 ...
- javascript 手势缩放 旋转 拖动支持:hammer.js
原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 ...
- 用rlwrap使sqlplus可以上下翻页
下载rlwrap-0.30 从光盘上安装readline-devel和readline 安装rlwrap: #tar -zxvf rlwrap-0.30.tar.gz#cd rlwrap-0.30#. ...
随机推荐
- 【leetcode 206】 反转链表(简单)
链表 概念: 区别于数组,链表中的元素不是存储在内存中连续的一片区域,链表中的数据存储在每一个称之为「结点」复合区域里,在每一个结点除了存储数据以外,还保存了到下一个结点的指针(Pointer). 由 ...
- 如何通过A/B测试提升Push推送消息点击率?
618电商节火热进行中,某电商App准备向用户推送一条全局活动消息,运营准备了两个推送文案: 文案A:年中囤货我们更懂你,没有大优惠怎敢惊动你:美妆个户,户外运动,医疗健康,一站式备齐,点击>& ...
- React Suspense 尝鲜,处理前后端IO异步操作
简单介绍一下Suspense Suspense主要用来解决网络IO问题,它早在2018年的React 16.6.0版本中就已发布.它的相关用法有些已经比较成熟,有的相对不太稳定,甚至经历了重命名.删除 ...
- JS:函数的形参与实参
形参: 函数显式参数在函数定义时列出. 函数调用未传参时,参数会默认设置为: undefined. function fn(a,b,c){ //a,b,c为形参 //此时有一个隐式操作:var a,v ...
- Python基础学习笔记_01
Python的介绍 1989年圣诞节创造,1991年正真出生,目前更新到3.0版本 具有最庞大的"代码库",人称"胶水语言",无所不能 一种跨平台的计算机程序设 ...
- HTML,CSS,JS,DOM,jQuery
HTML 超链接访问顺序 a:link-->a:visited-->a:hover-->a:active.(有顺序) link:表示从未访问过的链接的样式 visited:表示已经访 ...
- 如何修改 node_modules 里的文件
前言 有时候使用npm上的包,发现有bug,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食.那么我们应该如何修改别人的源码呢?首先, ...
- zabbix监控钉钉报警
1. bash脚本 #!/bin/bash to=$1 subject=$2 text=$3 #此处的 xxxxx 就是刚刚复制存留的 api 接口地址. curl -i -X POST \ 'htt ...
- TypeScript let与var的区别
1.作用域不同 用var声明的变量,只有函数作用域和全局作用域,没有块级作用域.而let可以实现块级作用域,只能在代码块{}内有效,在{}之外不能访问,如下代码所示: { let a = 0; var ...
- Mybatis整合第三方缓存
1) 为了提高扩展性.MyBatis定义了缓存接口Cache.我们可以通过实现Cache接口来自定义二级缓存 2) EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点. 3) 整合 ...