PDF在线预览插件touchPDF.js：手机端预览-CSDN博客

本文链接：https://blog.csdn.net/qq_41973208/article/details/123419782

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

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

项目相关：

version : touchPDF.js

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

博主也简单做了个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>