pdf.js+turn.js实现Web翻页阅读pdf文件（工作记录）

叩叮ING

已于 2022-05-13 10:47:17 修改

阅读量7.4k

点赞数 10

文章标签： java javascript

于 2022-03-21 19:02:55 首次发布

本文链接：https://blog.csdn.net/weixin_43966996/article/details/123642422

版权

需求实现：

接到客户需求，需要将网站展示的杂志（pdf格式）实现翻页效果并且不能被下载（浏览器直接打开方式直接宣布gg），所以就选择了使用pdf.js+turn.js+流处理方式实现。

所需资源（资源均可通过度娘获取），也可-->点击获取：

jquery.min.1.7.js

pdf.js

pdf.worker.js

modernizr.2.5.3.min.js

turn.js

1、pdf文件为本地

如果pdf文件存储在本地，则直接使用下面页面代码即可：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>turn.js和pdf效果</title>
		
	</head>
	<body>
		<div style="width: 1440px;height:900px;margin: 0 auto;text-align: center;">
			<div id="flipbook" style="margin-left: 20%;">
			</div>
		</div>
		
	</body>
</html>
<script type="text/javascript" src="js/jquery.min.1.7.js" ></script>
<script type="text/javascript" src="js/pdf.js" ></script>
<script type="text/javascript" src="js/pdf.worker.js" ></script>
<script type="text/javascript" src="js/modernizr.2.5.3.min.js" ></script>
<script type="text/javascript">

    var flipbook=$("#flipbook");
	//定义一些参数
	var pagestr = 1,bid= 1, scale = 1.1;
    window.onload=function(){
    /*	此处传递pdf路径（注：只支持本地文件，如文件为服务器，尤其是前后端分离项目，此处直接填路径可能会报跨域问题*/
    	getpdf("pdf/6666.pdf");
    }
    
    //获取pdf
    function getpdf(url){
    	var loadingTask=PDFJS.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 + '"></canvas>';