利用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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/286650.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/286650.shtml
英文地址，請注明出處：http://en.pswp.cn/news/286650.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！