利用pdf.js开发嵌入pdf显示，以及利用jquery-ui左右分栏显示

来源：互联网发布：旗宇cms网站管理系统编辑：程序博客网时间：2024/06/05 16:43

原来考虑用pdf.js的viewer.html页面，但怎么用都不方便。因此直接用pdf.js在左侧连续显示pdf所有内容，右侧显示其它相关内容，并且左右宽度可以任意拖动，最终实现效果如图：

代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="prefetch" href="/pdfview/test.pdf">
<style>
#pdfView > canvas {
width: 100%;
}
.ui-resizable-handle {
background-color: #699083;
width: 4px !important;
right: 0px !important;
}
.ui-resizable-e {
width: 4px !important;
right: 0px !important;
}
</style>
</head>
<body style="background-color: #ffffff">
<div style="width: 100%; height: 100%;" id="mainDiv">
<div style="width: 50%; float: left; height: 100%;" id="resizeBoxLeft">
<div id="pdfView" style="width: 100%; height: 100%; overflow: auto; background-color: #ffffff; -webkit-overflow-scrolling: touch;"></div>
</div>
<div id="resizeBoxRight" style="width: 50%; float: right; height: 100%; background-color: #ffffff; -webkit-overflow-scrolling: touch;">

</div>
</div>
</form>
<script type="text/javascript" src="/js/jquery/jquery-1.10.2.js"></script>
<script src="/js/jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="/js/jquery/jquery-ui.css">
<script src="build/pdf.js"></script>
<script type="text/javascript">

$(function ()
{
var url = '../pdfview/test.pdf';
PDFJS.workerSrc = 'build/pdf.worker.js';
var scale = 1.5;

//逐页创建canvas显示pdf内容
PDFJS.getDocument(url).then(function (pdf)
{
var pdfPageCount = pdf.numPages;
var getPageAndRender = function (pageNumber)
{
pdf.getPage(pageNumber).then(function (page)
{
var viewport = page.getViewport(scale);
var canvas = document.createElement('canvas');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
};
page.render(renderContext);
$("#pdfView").append(canvas);
});
if (pageNumber <pdfPageCount )
{
pageNumber++;
getPageAndRender(pageNumber);
}
}
getPageAndRender(1);

});

$("#resizeBoxLeft").resizable({
handles: 'e',
start: function() {
$("#resizeBoxRight").hide();//拖动时会影响拖动条向右拖动，所以拖动时隐藏，停止拖动再显示。（暂时没想到其它办法）
},
stop: function (event, ui)
{

//计算左右两栏宽度百分比
var rightWidth = $(document).width() - ui.size.width;
$("#resizeBoxLeft").css({ "width": parseInt((ui.size.width / $(document).width()) * 100) + "%", "height": "100%" });
$("#resizeBoxRight").css({ "width": parseInt((rightWidth / $(document).width()) * 100) + "%", "height": "100%" });
$("#resizeBoxRight").show();
}
});
});
</script>
</body>
</html>

阅读全文

0 0