pdf用turn翻页显示

た入场券 2022-04-10 01:28 297阅读 0赞

demo是一个菜鸟写的

主要是为了公司在建项目中，需要用将pdf像电子书一样翻页的效果，页面都是在mui里面写的，

必要的js

还需要

js/pdf.worker.js

turn.min.js

自己可以在网下载

找不到可以点这里       [pdf用到的js][pdf_js]

整个deme的显示的下载路径 [pdf翻页demo][pdf_demo]

下面是整个h5，那些css 可以自己写 req。js 和muishow 都是自己封装的工具，主要是用于ajax

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<link href="../css/mui.min.css" rel="stylesheet" />
    		<link rel="stylesheet" type="text/css" href="../css/beiyong.css" />
    		<link rel="stylesheet" type="text/css" href="../css/html.css"/>
    		<style type="text/css">
    			.main {
    				background-color: burlywood;
    				overflow: hidden;
    				margin: auto;
    				margin-top: 0.625em;
    			}
    			.container{
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				margin-top: 0.625em;
    			}
    			.page{
    				background-color: white;
    			}
    			.shouye{
    				padding: 15%;
    				height: 100%;
    				position:relative;
    			}
    			.bt{
    				width: 100%;	
    				text-align: right;		
    				font-family: "arial narrow";	
    			}
    			.xian{
    				width: 100%;
    				display: flex;
    				justify-content: flex-end;
    			}
    			.fg{
    				width: 30%;
    				height: 6px;
    				background-color: #000000;
    			}
    			.main-content{
    				width: 100%;
    				height: 60%;
    				font-size: 12px;
    			}
    			.footpage{
    				position: absolute;
    				right:15%;
    				bottom: 10%;
    			}
    			.flipbook>div{
    				width: 100%;
    				height: 100%;
    			}
    		</style>
    		<title></title>
    	</head>
    	<body>
    		<header class="mui-bar mui-bar-nav hbg">
    			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    			<h1 class="mui-title hbg">书籍</h1>
    		</header>
    		<div class="mui-content">
    			<div class="flipbook-viewport">
    			<div class="container">
    				<div class="flipbook">
    				</div>
    			</div>
    		</div>
    		</div>
    		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../js/mui.min.js"></script>
    		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/modernizr.2.5.3.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			
    			let w1 = document.body.clientWidth - 20;
    			let z = (297 / 210).toFixed(3);
    			var flipbook = $('.flipbook');
    			var pagestr = 1,bid= 2, scale = 0.8;
    			//自己pdf的路径，从后台获取的还没测试
    			var url = '粗茶淡饭也是幸福时光.pdf';
    			window.onload = function(){
    				getpdf(url);
    			}
    			
    			function getpdf(url){
    				//自己项目中worker.js的路径
    				pdfjsLib.workerSrc = 'js/pdf.worker.js';
    				var loadingTask = pdfjsLib.getDocument(url);
    				loadingTask.promise.then(function(pdf) {
    					//根据总页数添加固定的div和canvas
    					console.log("总页数",pdf.numPages);
    					for (let i = 1; i <= pdf.numPages;i++) {
    						let id = 'canvaspage' + i;
    						let div = document.createElement('div');
                            div.innerHTML = '<canvas id="' + id + '"></canvas>';
    						flipbook.append(div);
    						setcanvas(i,pdf,id);
    					}
    					
    					//调用turn
    					yepnope({
    						test : Modernizr.csstransforms,
    						yep: ['lib/turn.min.js'],
    						complete: loadApp
    					});
    					
    			 })
    			}
    			//将将pdf添加到canvas里面
    			function setcanvas(i,pdf,id){
    				pdf.getPage(i).then(function(page) {
    					    var viewport = page.getViewport(scale);
                            let canvas = document.getElementById(id);
    					    let context = canvas.getContext('2d');
    						 canvas.width = w1;
    					     canvas.height = w1*z;
    					    	let renderContext = {
    					      canvasContext: context,
    					      viewport: viewport
    					    };
    					   page.render(renderContext);
    				})
    			}
    			//自己写的获取数据的函数  
    			function getbooklist(){
    				let data = {
    					url:"/api/Book/book_article",
    					data:{
    						access_token : acctoken()||"",
    						page:pagestr,
    						bid:bid,
    					}
    				};
    				ajax(data,function(res){
    					console.log("书本文章列表",res);
    					/*if(res.code == -1){
    						mui.toast(res.message);
    					}*/
    				})
    			}
    			//用于turn.js
    			function loadApp() {
    				$('.flipbook').turn({
    						width:w1,	//翻页视图的宽度
    						height:w1*z,//高度
    						elevation: 50,
    						gradients: true,
    						display: 'single',//单页显示
    						autoCenter: false
    				});
    			}
    
    
    			
    		
    			
    
    		</script>
    	</body>
    
    </html>

[pdf_js]: https://download.csdn.net/download/qq_38026437/10861676
[pdf_demo]: https://download.csdn.net/download/qq_38026437/10861735