开发背景:移动端需要查看在线pdf文件
使用过pdfh5,不知到为什么不能查看在线文件,后来废弃了使用touchPDF
touchpdf缺点:无法滚动查看
demo源码:https://download.csdn.net/download/weixin_53105591/88519689
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<link rel="stylesheet" href="./css/touchPDF.css">
<script src="./js/pdf/pdf.compatibility.js"></script>
<script src="./js/pdf/pdf.js"></script>
<script type="text/javascript" src="./js/pdf/jquery.min.js"></script>
<script src="./js/pdf/jquery.touchSwipe.js"></script>
<script src="./js/pdf/jquery.touchPDF.js"></script>
<script src="./js/pdf/jquery.panzoom.js"></script>
<script src="./js/pdf/jquery.mousewheel.js"></script>
<script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
<!-- <script>
eruda.init();
</script> -->
</head>
<body>
<div id="pdfViewer" style="width:100vw;height:100vh"></div>
</body>
<script>
$("#pdfViewer").pdf({
showToolbar: false,
source: "http://111.16.49.14:8090/123.pdf",
tabs: [
// {title: "Section 1", page: 2, color: "orange"},
]
});
</script>
</html>
<style>
html,
object,
iframe {
min-width: 300px;
min-height: 800px;
}
span {
color: #1677ff;
}
</style>