Html5添加移动触摸的网页版PDF格式文件阅读器插件

最新推荐文章于 2021-05-31 10:16:44 发布

原创最新推荐文章于 2021-05-31 10:16:44 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Android&HTML5 专栏收录该内容

111 篇文章

订阅专栏

本文介绍了一种使用jQuery插件实现的网页版触屏PDF阅读器的配置方法。通过引入必要的JavaScript文件和CSS样式表，可以在网页上创建一个支持触控缩放和平移的PDF阅读器。文中还展示了如何通过简单的JavaScript代码来初始化该插件，并添加彩色的书签标签以增强用户体验。

[url]http://my.oschina.net/u/2505907/blog/598485[/url]
一、使用方法

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pdf.compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.js"></script>
<script type="text/javascript" src="jquery.panzoom.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.touchPDF.js"></script>
<link href="jquery.touchPDF.css" rel="stylesheet" media="screen" />

二、Html结构
<div id="myPDF"></div>

三、初始化插件

<script type="text/javascript">
$(function() {
$("#myPDF").pdf( { source: "yourfile.pdf" } );
});
</script>

你也可以为PDF页面添加一些彩色的Tabs书签。

$(function(){      
$("#myPDF").pdf({
source: "demo.pdf",
tabs:[
{title: "Tab 1", page: 2, color: "orange"},
{title: "Tab 2", page: 3, color: "green"},
{title: "Tab 3", page: 5, color: "blue"},
]
});
});