1、整理的代码,可自己梳理
var url = '//cdn.mozilla.net/pdfjs/tracemonkey.pdf';
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 0.8,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
//渲染某页pdf内容
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
document.getElementById('page_num').textContent = num;
}
//渲染队列
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
//预览前一页
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
//下一页
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
PDFJS.getDocument(url).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
$('#nav').on('mousewheel', function(event, delta) {
var dir = delta > 0 ? 'Up' : 'Down';
if (dir == 'Up') {
alert("向上滚动, www.imiansha.com");
} else {
alert("向下滚动");
}
return false;
});
需要监听的事件 键盘向下滚动的键,鼠标向下滚动
/*阅读区域,渲染阅读文档*/
var getPdfData = function (uri){
uri = $szoa_fileServiceUrl + '/file/preview?file=' + uri;
var PDFData = "";
$.ajax({
type:"post",
async:false, //
mimeType: 'text/pdf;charset=x-user-defined',
//文件服务器预览接口地址(10.248.71.211:7001)
//url:"https://csfile.szoa.sz.gov.cn/file/preview"+uri,
url:uri,
success:function(data){
PDFData = data;
}
});
var rawLength = PDFData.length;
//转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
var arrayBf = new ArrayBuffer(rawLength)
var array = new Uint8Array(arrayBf);
for(i = 0; i < rawLength; i++) {
array[i] = PDFData.charCodeAt(i) & 0xff;
}
DEFAULT_URL = array;
}
// $("#attachmentsView").append('<div class="outlineItem"><a href="' + 'http://localhost:8080/pdfjs/web/viewer.html?file='+mdata.pdfList[i].filePath+'">'+mdata.pdfList[i].fileName+'</a></div>');
// $("#attachmentsView").append('<div class="outlineItem"><a href="javascript:getPdfData(\''+mdata.pdfList[i].filePath+'\');">'+mdata.pdfList[i].fileName+'</a></div>');
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`create_user_id` varchar(50) DEFAULT NULL,
`last_modify_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
alter table hc_hotel modify column create_time timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP;
alter table hc_hotel modify column modify_time timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP;
timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
2、demo2
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<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: 50%;
width: 894px;
margin-left: -447px;
z-index: 9;
}
</style>
<script src="../build/pdf.js"></script>
<script type="text/javascript">
function showPdf() {
var container = document.getElementById("container");
container.style.display = "block";
var url = 'compressed.tracemonkey-pldi-09.pdf';
PDFJS.workerSrc = '../build/pdf.worker.js';
PDFJS.getDocument(url).then(function (pdf) {
pdf.getPage(2).then(function (page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
console.log(canvas);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
</script>
</head>
<body>
<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">
<canvas id="the-canvas"></canvas>
</div>
</div>
</body>
</html>