pdf翻书效果 jQuery pdf翻页效果

转载

detailtoo 2024-01-17 10:24:43

文章标签 pdf翻书效果 jQuery javascript 前端 html 宽高 文章分类 jQuery 前端开发

1.所需资源

2.目录结构

3. 该项目引用的是本地的pdf文件

CSS部分：

HTML部分：

JS部分：

本文使用pdf.js和turn.js进行了pdf网页预览和书籍翻页效果的开发，实际开发过程中踩了很多的坑，希望本文能给您的工作或学习提供帮助，谢谢阅读！

1.所需资源

pdf.js

pdf.worker.js

modernizr.2.5.3.min.js

turn.js

jquery.min.1.7.js

来源：PDF.js

Turn.js

前两个在链接一，下载后的build目录中，后三个在链接二中都有

2.目录结构

pdf翻书效果 jQuery pdf翻页效果_javascript

3. 该项目引用的是本地的pdf文件

CSS部分：

给整体添加了阴影，使其的整体效果更像一本书

<style>
			#flipbook {
                margin: 0 auto !important;
                box-shadow: 0 3px 15px #4d4c4c;
            }

            #flipbook .turn-page {
                background-color: white;
            }

            #flipbook .cover {
                background: #333;
            }

            #flipbook .cover h1 {
                color: white;
                text-align: center;
                font-size: 50px;
                line-height: 500px;
                margin: 0px;
            }

           #flipbook .loader {
                /* background-image: url(loader.gif); */
                width: 24px;
                height: 24px;
                display: block;
                position: absolute;
                top: 238px;
                left: 188px;
            }

            #flipbook .data {
                text-align: center;
                font-size: 40px;
                color: #999;
                line-height: 500px;
            }

            #flipbook .odd {
                background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
                background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
                background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
                background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
                box-shadow: 0 3px 15px #4d4c4c;
            }

            #flipbook .even {
                background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
                background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
                background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
                background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
                box-shadow: 0 3px 15px #4d4c4c;
            }
			.page {
				background-color: #fff;
			}
</style>

HTML部分：

<div style="width: 1440px;height:900px;margin: 0 auto;text-align: center;background-color: 
      #fff;">
	<div id="flipbook" style="margin-left: 20%;background-color: #fff;"></div>
</div>

JS部分：

首先是引入需要的资源

<script src="./JS/turnjs4/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="./JS/pdfjs/build/pdf.js" ></script>
<script type="text/javascript" src="./JS/pdfjs/build/pdf.worker.js" ></script>
<script type="text/javascript" src="./JS/turnjs4/extras/modernizr.2.5.3.min.js" ></script>

定义一些后面需要的参数，路径使用的是相对路径

//定义一些参数
	var flipbook=$("#flipbook")
	var pagestr = 1,bid= 1, scale = 1, rotate = 90;
    window.onload=function(){
    //此处传递pdf路径
    	getpdf("./3.2.pdf")
    }

该部分是pdf内容的获取，创建canvas，以及调用turn.js

需要注意的是，每一的canvas在创建的时候一定要添加背景颜色，不然在翻页时会因为背景色透明导致两张pdf的内容重叠

//获取pdf
    function getpdf(url){
    	var loadingTask=pdfjsLib.getDocument(url)//获取pdf的文件信息
    	loadingTask.promise
		.then(function(pdf){
    		//根据总页数添加固定的div和canvas
    		for (let i = 1; i <= pdf.numPages;i++) {
					var id = 'canvaspage' + i
					var div = document.createElement('div')
                    div.innerHTML = '<canvas id="' + id + '" class="page"></canvas>'
					flipbook.append(div)
					setcanvas(i,pdf,id)
			}
    		
    		//调用turn
			yepnope({
					test : Modernizr.csstransforms,
					yep: ['./JS/turnjs4/lib/turn.js'],
					complete: loadApp
			})
    	})
    }

下面这段代码是用来将获取到的pdf信息添加到创建好的canvas里，相当于在画布上画画。

因为pdf中的每一页大小都不一定相同，但是我们使用turn.js创造翻页效果时需要有相对固定的宽高（个人觉得如果宽高不定的话会非常鬼畜不像一本书），所以只有通过pdf.js中的scale(缩放)属性，来调节每一页pdf的大小，1440 和 900是我想要的像素，如果有其他需求可以修改。

根据宽高的比例来判断是否需要旋转，你一定有疑问，为什么要旋转呢，因为在实际业务场景中，常常会出现宽高比及其不协调的情况，如果不旋转的话有可能会影响其展示效果，出于这个原因果断选择旋转，1.42是我想要的宽高比，如有其他需求可以修改。

之后就是设置画布的宽高，并把内容渲染上去，viewport是为了得到不进行缩放的宽高，便于计算缩放比例newScale，之后创建的newViewport用来渲染。

function setcanvas(i,pdf,id){
		pdf.getPage(i).then(function(page) {
			    var viewport = page.getViewport({scale:scale})
                var canvas = document.getElementById(id)
			    var context = canvas.getContext('2d')


				//根据宽高判断是否需要旋转
				if (viewport.height / viewport.width >= 1.42) {

					var newScale = 1440 / viewport.height
					var newViewport = page.getViewport({scale:newScale,rotation:rotate})
					var outputScale = window.devicePixelRatio

					canvas.width = Math.floor(newViewport.width * outputScale);
					canvas.height = Math.floor(newViewport.height * outputScale);
					canvas.style.width = Math.floor(newViewport.width) + "px";
					canvas.style.height = Math.floor(newViewport.height) + "px";

					var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] :
						null;

					var renderContext = {
						canvasContext: context,
						transform: transform,
						viewport: newViewport
			    	}
			   		page.render(renderContext)

					return ;
				}

				//根据每张图的宽高，按标准重新计算缩放比例
				var newScale = 900 / viewport.height
				
				var newViewport = page.getViewport({scale:newScale})
				var outputScale = window.devicePixelRatio

				canvas.width = Math.floor(newViewport.width * outputScale);
				canvas.height = Math.floor(newViewport.height * outputScale);
				canvas.style.width = Math.floor(newViewport.width) + "px";
				canvas.style.height = Math.floor(newViewport.height) + "px";

				var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] :
					null;

			    var renderContext = {
			        canvasContext: context,
					transform: transform,
			        viewport: newViewport
			    }
			   page.render(renderContext)
		})
	}

最后就是turn.js的配置项了

//turn.js
	function loadApp() {
		$("#flipbook").turn({
			  width: 1440,
			  height: 900,
			  elevation: 50,
			  display: 'single',
			  autoCenter: true,
			  duration:1000,
			  gradients:true,
			})
	}