pdf用turn翻頁顯示
阿新 • • 發佈：2018-12-28
demo是一個菜鳥寫的
主要是為了公司在建專案中，需要用將pdf像電子書一樣翻頁的效果，頁面都是在mui裡面寫的，
必要的js
<script src="../js/jquery.min.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>
還需要
js/pdf.worker.js
turn.min.js
自己可以在網下載
找不到可以點這裡 pdf用到的js
整個deme的顯示的下載路徑 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>