admin管理员组文章数量:1648972
首先贴图:
大概是这样的,可以动态设置打开的路径
首先是html界面:
<h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
<div id="container" style="display: none;">
<div class="lightbox"></div>
<div id="pop" class="pop">
<div>
<button id="prev">上一页</button>
<button id="next">下一页</button>
<button id="close" onclick="close()">关闭</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="the-canvas"></canvas>
</div>
</div>
然后是css,可以放到和html同一面
<style type="text/css" >
.lightbox {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 7;
opacity: 0.3;
display: block;
background-color: rgb(0, 0, 0);
}
.pop {
position: absolute;
left: 30%;
width: 894px;
margin-left: -447px;
z-index: 9;
}
</style >
然后是js:(先贴部分),还差在document绑定事件
var pageindex = 1; //当前页
var maxindex; //总页数
var view;
//单页pdf.js
function showPdf(nowpage) {
console.log(nowpage);
if (nowpage == "" || nowpage == null)
nowpage = pageindex;
var container = document.getElementById("container");
container.style.display = "block";
var url = '/Scripts/dd.pdf';
PDFJS.workerSrc = '/Scripts/pdf/pdf.worker.js';
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(nowpage).then(function getPageHelloWorld(page) {
var scale = 2;
var viewport = page.getViewport(scale);
view = viewport; //存放,清空的时候用
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
document.getElementById('page_num').textContent = nowpage;//当前页数
maxindex = pdf.numPages;//总页数
// console.log(pdf.numPages);
// console.log(canvas);
var renderContext = {
canvasContext: context,
viewport: viewport
};
console.log(page);
page.render(renderContext);
});
});
}
//上一页
//上一页
function onPrevPage() {
if (pageindex <= 1) {
return;
}
showPdf(--pageindex);
}
//下一页
function onNextPage() {
if (pageindex >= maxindex) {
return;
}
showPdf(++pageindex);
}
这是另外一部分:(在同一个js)绑定事件以及那些得再这里写
$(document).ready(function () {
document.getElementById('prev').addEventListener('click', onPrevPage); //按钮绑定事件得再这里面哦
document.getElementById('next').addEventListener('click', onNextPage); //对应html里的id和js定义的事件
$("#close").click(function () { //这个是清空画布然后再让它隐藏
var cxt = document.getElementById("the-canvas").getContext("2d");
cxt.clearRect(0, 0, view.width, view.height);
$("#container").hide();
})
});
然后下面这个是pdf.js的压缩包
链接:https://pan.baidu/s/1XiRhkl3iJpYmeIUdrOJRBA
提取码:2w3h
版权声明:本文标题:pdf.js的使用(分页)以及关闭(web端在线显示文档pdf) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729504646a1203486.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论