demo是一个菜鸟写的
主要是为了公司在建项目中，需要用将pdf像电子书一样翻页的效果，页面都是在mui里面写的，
必要的js
< src=\"../js/jquery.min.js\" type=\"text/ \" charset=\"utf-8\"></ >
< src=\"js/modernizr.2.5.3.min.js\" type=\"text/ \" charset=\"utf-8\"></ >
< src=\"js/pdf.js\" type=\"text/ \" charset=\"utf-8\"></ >
还需要
js/pdf.worker.js
turn.min.js
自己可以在网下载
找不到可以点这里
下面是整个h5，那些css 可以自己写 req。js 和muishow 都是自己封装的工具，主要是用于ajax
<!DOCTYPE html>
<html>
<head>
< charset=\"UTF-8\">
< name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />
< href=\"../css/mui.min.css\" rel=\"stylesheet\" />
< rel=\"stylesheet\" type=\"text/css\" href=\"../css/beiyong.css\" />
< 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>
< ></ >
</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- hbg\">书籍</h1>
</header>
<div class=\"mui-content\">
<div class=\"flipbook-viewport\">
<div class=\"container\">
<div class=\"flipbook\">
</div>
</div>
</div>
</div>
< src=\"../js/jquery.min.js\" type=\"text/ \" charset=\"utf-8\"></ >
< src=\"../js/req.js\" type=\"text/ \" charset=\"utf-8\"></ >
< src=\"../js/mui.min.js\"></ >
< src=\"../js/muishow.js\" type=\"text/ \" charset=\"utf-8\"></ >
< src=\"js/modernizr.2.5.3.min.js\" type=\"text/ \" charset=\"utf-8\"></ >
< src=\"js/pdf.js\" type=\"text/ \" charset=\"utf-8\"></ >
< type=\"text/ \">
let w1 = document.body.clientWidth - 20;
var flipbook = $(\'.flipbook\');
var pagestr = 1,bid= 2, scale = 0.8;
//自己pdf的路径，从后台获取的还没测试
var url = \'粗茶淡饭也是幸福时光.pdf\';
window. = 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
});
}
</ >
</body>
</html>
继续阅读与本文标签相同的文章
-
新能力丨困扰商家已久的“分账问题”终于被解决了！
2026-05-18栏目： 教程
-
在线PDF加密，你的隐私你做主！
2026-05-18栏目： 教程
-
浅谈物联网用户体验目标的变化
2026-05-18栏目： 教程
-
Linux基础命令---host域名查询工具
2026-05-18栏目： 教程
-
Apache Flink Meetup 北京站，可能有你最想听的技术干货！
2026-05-18栏目： 教程