admin管理员组文章数量:1648972
需求实现：
接到客户需求，需要将网站展示的杂志（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 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 ></canvas>';
版权声明：本文标题：pdf.js+turn.js实现Web翻页阅读pdf文件（工作记录） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729505538a1203582.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论