PDF在线预览插件touchPDF.js：手机端预览

接上一篇web端预览，博主找了一篇关于手机端的预览插件，丑是丑了点，但是能用，下面就来介绍一下吧！

PDF在线预览插件：手机端预览

1、编辑界面的HTML代码
2、第二步就没了
3、既然这样那我们直接上预览图吧

项目相关：

version : touchPDF.js

上篇博客也说了，这段时间再开发一个功能Pdf在线预览，也介绍完了电脑端网页预览插件，但之前用的PDF-object并不支持手机网页端预览，因为需求需要，所以有研究了一下手机端的，这里就讲一下手机网页端预览的插件！

博主也简单做了个demo：

–我这儿同样新建了个简单的Demo，相关插件已经放进去了，不要积分，可开箱即用》》》

1、编辑界面的HTML代码

我们简单做一个pdf预览的承载界面，其实也可以和网页端一样开辟一个模块区域来放预览。

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta charset="UTF-8"><title>素材预览</title><link href="css/jquery.touchPDF.css" rel="stylesheet" media="screen" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/pdf.compatibility.js"></script><script type="text/javascript" src="js/pdf.js"></script><script type="text/javascript" src="js/jquery.touchSwipe.js"></script><script type="text/javascript" src="js/jquery.touchPDF.js"></script><script type="text/javascript" src="js/jquery.panzoom.js"></script><script type="text/javascript" src="js/jquery.mousewheel.js"></script><style>body , html{background-color: #404040;height: 100%;padding: 0;margin: 0;}</style>
</head>
<body>
<div id="myPDF" style="height: 100%; width: 95%; margin: auto;">
</div>
<script type="text/javascript">$("#myPDF").pdf( {source:"VV.pdf",tabs: [{title: "第2页", page: 2, color: "orange"},{title: "第5页", page: 5, color: "green"},{title: "第10页", page: 10, color: "blue"},]} );
</script>
</body>
</html>

2、第二步就没了

在界面中引入相关的js文件，其实就可以了，相关依赖的js我已经放在了上面链接的包里面了，可以直接取用。

3、既然这样那我们直接上预览图吧

大概其实就是以下的效果

》》关于上一篇Web端的预览可点击此处直接跳转

*以上便是手机网页端实现PDF预览的全部操作，个人开发过程中所遇到的，简单总结，已做记录,如果对你有用，那就点个赞吧！如有错误还望指正！一（只）直缓慢前进的全栈码畜~

PDF在线预览插件touchPDF.js：手机端预览相关推荐

手机端预览pdf的那些事
Hello,大家周末好,最近在写项目中遇到了手机端预览pdf的问题今天在这里给大家分享一下. 我遇到的问题分为2种:ios:X一下的机型使用window.open来在手机端打开不能滑动文件,X以上机型 ...
JS手机端移动端长按longtap事件
JS手机端移动端长按longtap事件移动端并没有所谓的longtap事件,即长按事件.但是,有时候会用到,只能借助touchstart.touchmove.touchend三个事件以及延迟setTi ...
h5页面预览pdf文件_H5移动端在线浏览pdf文件，推荐插件TouchPDF
pdf.png 公共的pdf页面可以自己写,调用插件的代码也相对简单: seePDF.html seePDF.js $(function() { //文件服务器的路径 var picDownloadS ...
html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用这是一个github工程,功能很 ...
html photoswipe原理,手机图片预览插件photoswipe.js使用总结
手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分andro ...
百度富文本编辑器手机端预览插件开发
在百度富文本编辑器编辑的时候担心在手机端打开格式乱掉,编辑提交再去手机端刷新查看比较麻烦,希望在编辑器可以直接查看,效果如下: 下载文件: 链接: https://pan.baidu.com/s/1v ...
JS 手机端摇一摇苹果IOS13.3高版本处理
苹果IOS13.3高版本需要动作与方向授权以后才能进行摇一摇,授权过程必须有点击才能授权.在进入需要摇一摇的页面的时候可以进行授权,在进行提示点击我用的是手机端swal插件进行提示点击授权. 拒绝授 ...
zepto.js手机端开宝箱动画js特效
下载地址 zepto.js实现的手机端开宝箱动画特效 dd:
js手机端时间区间_js 时间区间
对于页面加载时间的测试,简单的需求(仅仅是看看请求时间消耗分布)可以通过开发者工具或者Http Watch了解,但如果是想对页面加载进行优化,进行深入了解的(例如:渲染过程中的CPU开销.网络传输时间 ...