利用pdf.js在手机端网页中直接打开PDF文档

最新推荐文章于 2024-07-29 22:16:11 发布

1170201028

最新推荐文章于 2024-07-29 22:16:11 发布

阅读量4w

点赞数 1

分类专栏：插件应用文章标签： pdf 手机网页

本文链接：https://blog.csdn.net/a1170201028/article/details/52045452

版权

插件应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在项目中用到了需要在手机端直接打开PDF文档的情况，借鉴网友们的意见使用了pdf.js，测试了一下简单好用，下面是使用例子

<!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下载