网站建设与优化推广方案,手机做任务网站,网站后台发布新闻,生活中好的设计产品原来考虑用pdf.js的viewer.html页面#xff0c;但怎么用都不方便。因此直接用pdf.js在左侧连续显示pdf所有内容#xff0c;右侧显示其它相关内容#xff0c;并且左右宽度可以任意拖动#xff0c;最终实现效果如图#xff1a; 代码#xff1a;!DOCTYPE htmlht…原来考虑用pdf.js的viewer.html页面但怎么用都不方便。因此直接用pdf.js在左侧连续显示pdf所有内容右侧显示其它相关内容并且左右宽度可以任意拖动最终实现效果如图 代码!DOCTYPE html html head meta http-equivContent-Type contenttext/html; charsetutf-8 / title/title link relprefetch 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 stylebackground-color: #ffffff div stylewidth: 100%; height: 100%; idmainDiv div stylewidth: 50%; float: left; height: 100%; idresizeBoxLeft div idpdfView stylewidth: 100%; height: 100%; overflow: auto; background-color: #ffffff; -webkit-overflow-scrolling: touch;/div /div div idresizeBoxRight stylewidth: 50%; float: right; height: 100%; background-color: #ffffff; -webkit-overflow-scrolling: touch; !---其它内容--- /div /div /form script typetext/javascript src/js/jquery/jquery-1.10.2.js/script script src/js/jquery/jquery-ui.js/script link relstylesheet href/js/jquery/jquery-ui.css script srcbuild/pdf.js/script script typetext/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
