利用pdf.js在手机端网页中直接打开PDF文档
2016-07-27 15:00
716 查看
在项目中用到了需要在手机端直接打开PDF文档的情况,借鉴网友们的意见使用了pdf.js,测试了一下简单好用,下面是使用例子
例子下载地址demo下载
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta charset="UTF-8"> <title>{$neirong.title}</title> <link href="__PDF__/jquery.touchPDF.css" rel="stylesheet" media="screen" /> <style> body , html{ background-color: #404040; height: 100%; padding: 0; margin: 0; } </style> </head> <body> <div id="myPDF" style="height: 100%; width: 100%; margin: auto;"></div> <script type="text/javascript" src="__PDF__/pdf.compatibility.js"></script> <script type="text/javascript" src="__PDF__/pdf.js"></script> <script type="text/javascript" src="__PDF__/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="__PDF__/jquery.touchSwipe.js"></script> <script type="text/javascript" src="__PDF__/jquery.touchPDF.js"></script> <script type="text/javascript" src="__PDF__/jquery.panzoom.js"></script> <script type="text/javascript" src="__PDF__/jquery.mousewheel.js"></script> <script type="text/javascript"> $(function() { $("#myPDF").pdf( { source: "__ROOT__/pdf/{$neirong['pdfurl']}" tabs: [ {title: "Section 1", page: 2, color: "orange"}, {title: "Section 2", page: 3, color: "green"}, {title: "Section 3", page: 5, color: "blue"}, ] } ); }); </script> </body> </html>
例子下载地址demo下载
相关文章推荐
- Android之获取手机上的图片和视频缩略图thumbnails
- android wifi 无线调试
- 基于 Linux 的智能手机 Librem 5 开启预售
- 5 个可以满足你的生产力、沟通和娱乐需求的开源手机应用
- 每日安全资讯:哪些属于App违法违规收集使用个人信息?
- 每日安全资讯:命案侦破过程揭示 Google 能够跟踪全世界的手机
- 设计更快的网页(一):图片压缩
- 一款免费且安全的在线 PDF 转换软件
- IE:获取完整的网页
- IE:脱机浏览网页
- 网页恶意代码的预防
- 手机4大隐藏功能及使用必知常识第1/2页
- 对于技术人员的出现了运行时间错误,是否要进行调试的解决方法
- PDF里的文字显示模糊的解决方法
- 针对网页制作者的网页打开速度慢的解决方法集合第1/2页
- PDF编辑工具 Foxit PDF Editor 1.5 Build 2911 下载
- 没有文件大小限制并免费的PDF到HTML转换工具
- MicroAdobe PDF Editor 6.2 英文正式版附破解补丁 下载