vue移动端pdf在线预览,并实现手势缩放、移动
通常我们会遇到ios手机不能下载文件的问题,那是因为苹果手机的拦截机制,这时我们只能通过别的方法来解决问题,我这里的解决方法是直接实现在线预览
- pdf预览跟图片预览不同,pdf可能会有多张,而图片只有一张,使用图片预览的组件肯定是行不通的
- 这里我使用的是一个vue-pdf的插件,这是一个使用起来容易上手的插件。首先我们需要在vue项目中引入它:
npm install --save vue-pdf
然后在展示pdf的页面引用
import pdf from ‘vue-pdf’
html代码
<template><div class="pdf"><div class="pdf-tab"><divclass="btn-def btn-pre"@click.stop="prePage">上一页</div><divclass="btn-def btn-next"@click.stop="nextPage">下一页</div></div><div>{{pageNum}}/{{pageTotalNum}}</div><div class="any-scroll-view"><div ref="body" :style="bodyStyle"><pdfid="pdfPreview"ref="pdf":src="pdfUrl":page="pageNum":rotate="pageRotate"@password="password"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></div></div></div>
</template>
js代码和style代码
alloyfinger.js、transform.js、to.js引入的这三个js里封装了手势缩放移动、旋转的方法,可以去GitHub将源码挡下来,将这三个js复制到自己的static文件下,然后引用即可。点此进入GitHub
<script>import pdf from 'vue-pdf'import AlloyFinger from "../../../static/js/alloyfinger.js";import transform from "../../../static/js/transform.js";import To from "../../../static/js/to.js";export default {name: 'mistakesVoucher',props: {// 减速度, 单位px/s²acceleration: {type: Number,default: 3600}},data() {return {id: '',pdfUrl:'',// pdf文件地址pageNum:1,pageTotalNum:1,pageRotate:0,// 加载进度loadedRatio:0,curPageNum:0,transitionDuration: 300,goPath: '', //将要去的界面};},beforeRouteEnter (to, from, next) { //监听从哪个页面过来let path = from.fullPath;next(vm => vm.setPath(path));},created(){this.getParams()},computed: {bodyStyle() {return {transitionDuration: `${this.transitionDuration}ms`,transform: `translate(${this.scrollLeft}px, ${this.scrollTop}px)`};}},mounted() {this.getData();},methods: {setPath(path) {this.goPath = path.split("/")[1];},//返回键back() {this.$router.push({name: this.goPath,params: {id: this.id}})},getParams() {// 取到路由带过来的参数let routerParams = this.$route.params.id// 将数据放在当前组件的数据内this.id = routerParamsthis.pdfUrl = pdf.createLoadingTask(this.$route.params.url)},getData() {let that = this;let element = document.getElementById("pdfPreview");Transform(element);var initScale = 1;this.af = new AlloyFinger(element, {rotate: function (evt) { //实现旋转element.rotateZ += evt.angle;},multipointStart: function () {initScale = element.scaleX;},pinch: function (evt) { //实现缩放element.scaleX = element.scaleY = initScale * evt.zoom;},pressMove: function (evt) { //实现移动element.translateX += evt.deltaX;element.translateY += evt.deltaY;evt.preventDefault();},});},prePage(){var p = this.pageNump = p>1?p-1:this.pageTotalNumthis.pageNum = p},nextPage(){var p = this.pageNump = p<this.pageTotalNum?p+1:1this.pageNum = p},password(updatePassword, reason) {updatePassword(prompt('password is "123456"'))},pageLoaded(e){this.curPageNum = e},pdfError(error){console.error(error)},},components:{pdf},};
</script><style>
#app {font-family: Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;width: 100%;margin: 0 auto;overflow: hidden;min-height: 100vh;
}
.pdf-tab {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;padding: 0 .4rem;-ms-flex-pack: justify;justify-content: space-between;
}
.pdf-tab .btn-def {border-radius: .2rem;font-size: .98rem;height: 1.93333rem;width: 6.4rem;text-align: center;line-height: 1.93333rem;background: #409eff;color: #fff;margin-bottom: 1.26667rem;
}
.pdf-total {text-align: center;font-size: 1.45333rem;
}
.pdf-process, .pdf-total {text-align: center;font-size: 1.45333rem;
}
.pdf-num {margin-bottom: 1.2rem;
}
</style>
效果
gitee测试源码: https://gitee.com/fang_zheng_wei/mobile-preview
下一篇: vue移动端实现excel在线预览
vue移动端pdf在线预览,并实现手势缩放、移动相关推荐
- vue框架实现pdf在线预览
记录下实现pdf预览展示的坑,刚开始使用vue-pdf在本地运行是可以展示的,但是发布测试环境展示不出来 报以下错误: 网上找的的是: 网上搜到的解决方法 但是我看半天不知道怎么解决,然后换pdfjs ...
- vue移动端实现图片预览
接着上文的文件上传.下载.删除继续往下说,我们先说移动端的图片格式预览 上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法 图片预览其实 ...
- vue 使用 vue-pdf 实现pdf在线预览
vue 使用 vue-pdf 实现pdf在线预览 1.安装 npm install --save vue-pdf 2.引用 import pdf from 'vue-pdf' export defau ...
- PDF在线预览插件touchPDF.js:手机端预览
接上一篇web端预览,博主找了一篇关于手机端的预览插件,丑是丑了点,但是能用,下面就来介绍一下吧! PDF在线预览插件:手机端预览 1.编辑界面的HTML代码 2.第二步就没了 3.既然这样那我们直接 ...
- 前端实现pdf在线预览
概述:pdf在线预览,包括PC端浏览器.IOS.Android,开发过程中遇到的问题及解决方案 [1]iframe 直接打开pdf文件(可用于PC端) <iframe src="pdf ...
- html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- java实现word转pdf在线预览格式
java实现word转pdf在线预览格式 前段时间的项目里涉及了此功能,调研过一些方案,踩过一些坑,一一总结在此. java转pdf的方案很多,但是很多都要收费,转pdf也有一些格式方面的问题. 方案 ...
- html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
最新文章
- 人生和算法结合起来,你会不会比现在混得好?看完我明白了!
- 用c语言编一个贪吃蛇,刚学C语言,想写一个贪吃蛇的代码
- 死锁产生原因-竞争资源引起进程死锁
- java继承对象转换_java 继承的基础(转)
- Insertion Sort List
- git只添加指定类型的文件的.gitignore规则
- Python学习(二)语言基础
- kodi刮削器 中文_教你PLEX插件播放4K不能使用KODI解码导致卡顿的解决办法
- 驱动程序的专业术语-秋镇菜版
- el 能否定义作用域变量_python命名空间和作用域
- 给异地服务器远程ssh重装CentOS系统
- Eclipse中 Clean 的时候总是警告 org.apache.catalina.webresources.Cache backgroundProcess
- 【Unity】用Lerp()实现类杀戮尖塔手牌变化
- Django路由写法
- 实验吧-who are you?
- 编程语言ASCII码对照表
- ZIP压缩算法原理解析(好文推荐,看完就懂)
- 论文翻译:2020_RNNoise:A Hybrid DSP/Deep Learning Approach to Real-Time Full-Band Speech Enhancement...
- 运行时读取PAK文件
- YOLOF训练自己的数据集(目标检测,cvpods版本)