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

原来考虑用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>

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

解决pdf.js预览pdf不显示签名问题(两条路)
解决pdf.js预览pdf不显示签名问题(两条路) 解决这个问题的方法很有意思,解决这一类问题的思路就是:如何不让pdf.js抛出异常或者警告.[其实乍一看好像和问题本身并不沾边,哈哈] 电子签章不显 ...
利用pdf.js在线展示PDF文档
在Web项目中,经常需要在浏览器端展示PDF文档,本文通过一个简单的小例子,简述pdf.js的简单使用,仅供学习分享使用,如有不足之处,还请指正. pdf.js下载 pdf.js是一个通用的.基于we ...
区块链】利用Node.js开发与合约交互的Web界面
区块链]利用Node.js开发与合约交互的Web界面 2018-03-11 16:10:37 宣之于口阅读数 6128 收藏更多分类专栏: 区块链区块链学习笔记版权声明:本文为博主原创文章 ...
关于使用pdf.js预览pdf的一些问题
手机应用中pdf展示使用非常广泛, 一些pdf由于特殊的内容比如文字.电子签章必须使用复杂的解析器来解析,当使用MultiPdf 这个库加载,会使得包变得非常庞大, 这里我们考虑使用pdf.js 来解 ...
pdf.js浏览中文pdf乱码的问题解决
由于项目中需要支持移动设备在线浏览pdf,苹果还好,天生支持,但是安卓中就不行了,需要第三方组件的支持. 这里就找到了pdf.js,由于pdf数据太多,开始的时候没法一一测试,所以随便测试打开了几篇没 ...
pdf在html网页中打开是乱码,pdf.js浏览中文pdf乱码的问题解决
由于项目中需要支持移动设备在线浏览pdf,苹果还好,天生支持,但是安卓中就不行了,需要第三方组件的支持. 这里就找到了pdf.js,由于pdf数据太多,开始的时候没法一一测试,所以随便测试打开了几篇没 ...
vue-cli使用pdf.js插件浏览pdf文件，禁止下载打印复制粘贴。
很多项目中都会有预览pdf文件,普通的可以直接使用a标签来实现该功能,但是此预览是浏览器自带的,有时候项目需求中会有禁止用户禁止下载和打印功能,浏览器自带的是无法满足的. 小编在网上找到pdf.js插 ...
Latex Beamer PPT 左边文字右边图片，分栏显示
Latex Beamer PPT 左边文字右边图片,分栏显示 \begin{frame}{Previous model}{Secert Sharing Scheme} \begin{columns}\ ...
jQuery UI 添加法定节假日显示
[b][align=center][size=small]jQuery UI 添加法定节假日显示[/size][/align][/b] 有新需求了,填写日历的时候需要显示法定节假日. 在网上了解了一下 ...

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

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

最新文章

热门文章