pdf文档插件 viewer.js用法

设置页面默认大小

const DEFAULT_SCALE_VALUE = "page-fit"; page-fit可修改其他

//修改默认放大倍数 viewer.js

case "page-width": scale = pageWidthScale*1.4; break;

//或者 viewer.html

PDFViewerApplication.pdfViewer.currentScale;

设置默认小手功能

jQuery("#iframe5").contents().find("#cursorHandTool").trigger("click")

文件路径需要encodeURIComponent转义（否则会访问两次或者访问不到的情况）

//http://192.168.16.247:8088/utility/3rd/browse-pdf-3.11/web/viewer.html?file=http%3A%2F%2F192.168.16.250%3A8088%2Ffileserver%2Fdocumenttree%2Fpreview%2F1988853001434976258%3Ftokenid%3DNjE5NGFkNTMtMzYzZi00MmFlLTkxNGQtN2EwYzEzMTJhODdi

iframe3url = "/utility/3rd/browse-pdf-3.11/web/viewer.html?file=" + encodeURIComponent(window.$lzapphost.fileserver + `/documenttree/preview/${mid}?tokenid=${tokenshowpdf}`)

jQuery('.iframe3').attr('src', iframe3url)

pdf宽度100%时, 与两边的间隙

const SCROLLBAR_PADDING = 0;//kll 12-26 SCROLLBAR_PADDING = 40 //原

刷新页面去除页面浏览滚动条历史

async _writeToStorage() {
const databaseStr = JSON.stringify(this.database);
//localStorage.setItem("pdfjs.history", databaseStr);
}

async _readFromStorage() {
//return localStorage.getItem("pdfjs.history");
}

动态修改scaleSelect的值

viewer.js

jQuery(function () { // 获取原生DOM元素并触发原生change事件 window.addEventListener('message', function(event) { if (event.data.type === 'dataChange') { // 处理数据变化 let scale = event.data.value; console.log('Parent data changed: ' + event.data.value); PDFViewerApplication.initializedPromise.then(function () { // 设置缩放级别为“page-width” PDFViewerApplication.pdfViewer.currentScaleValue = scale; }); } }); });

父页面（引用页面）

viewer.js

webViewerWheel方法里面

if (previousScale !== currentScale) { const scaleCorrectionFactor = currentScale / previousScale - 1; const rect = pdfViewer.container.getBoundingClientRect(); const dx = evt.clientX - rect.left; const dy = evt.clientY - rect.top; pdfViewer.container.scrollLeft += dx * scaleCorrectionFactor; pdfViewer.container.scrollTop += dy * scaleCorrectionFactor; let iframename=window.frameElement.id; console.log("iframe:"+iframename,dx,dy);window.parent.postMessage({type: 'getscale',value:currentScale,"dx":pdfViewer.container.scrollLeft,"dy":dy, 'iframe':iframename}, '*');}

fileControst.html

window.addEventListener('message',function (e){ if(e.data.type==="getscale"){ debugger; let currentScale=e.data.value,dx=e.data.dx,dy=e.data.dy,iframe=e.data.iframe; // let optionlen=jQuery(".content_box").find("#iframe2").contents().find("body").find("#scaleSelect").find("option[value='"+currentScale+"']").length // if(optionlen==0){ // jQuery(".content_box").find("#iframe1").contents().find("body").find("#scaleSelect").append(`<option value="${currentScale}" class="hide">${Math.round(currentScale*100)+"%"}</option>`); // } // jQuery(".content_box").find("#iframe1").contents().find("body").find("#scaleSelect").val(currentScale).trigger('change') // // 触发自定义事件，将key和value作为参数传递 if(iframe==="iframe2"){ window.frames[1].postMessage({ type: 'dataChange1', value:currentScale, dx:dx,dy:dy,iframe:iframe }, '*'); }else{ window.frames[0].postMessage({ type: 'dataChange2', value:currentScale, dx:dx,dy:dy,iframe:iframe }, '*'); } } });

viewer.html

jQuery(function () { // 获取原生DOM元素并触发原生change事件 window.addEventListener('message', function(event) { if (event.data.type === 'dataChange2') { // 处理数据变化 let scale = event.data.value; let dx=event.data.dx; let dy=event.data.dy; let iframe=event.data.iframe console.log('Parent data changed: ' + event.data.value); // PDFViewerApplication.initializedPromise.then(function () { // 设置缩放级别为“page-width” debugger; PDFViewerApplication.pdfViewer.currentScaleValue = scale; const previousScale = PDFViewerApplication.pdfViewer.currentScale; const scaleCorrectionFactor = scale / previousScale - 1; // if(scaleCorrectionFactor==0){ // PDFViewerApplication.pdfViewer.container.scrollLeft+=dx; // PDFViewerApplication.pdfViewer.container.scrollTop+=dy; // }else{ // PDFViewerApplication.pdfViewer.container.scrollLeft+=dx* scaleCorrectionFactor; // PDFViewerApplication.pdfViewer.container.scrollTop+=dy* scaleCorrectionFactor; // } // }); PDFViewerApplication.pdfViewer.container.scrollLeft=dx; PDFViewerApplication.pdfViewer.container.scrollTop=dy } }); });

页面实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <script src="/utility/lzmain.js"></script> <!-- <script src="/utility/lzmain-form.js"></script> --> <link rel="stylesheet" href="./css/style.css"> </script> <title></title> <style> @font-face { font-family: 'arial'; src: url('../fonts/Arial/arial.ttf')format('truetype'); } body { background: #F2F2F2; font-family: "Microsoft YaHei", "微软雅黑" !important; padding: 0px; } .box { width: 100%; height: 100%; display: flex; flex-wrap: wrap; background-color: #fff; border-bottom: 1px solid #E6E6E6; } .box .box-con { width: calc( 50% - 9px); margin-bottom: 0px; height: calc( (100% / 2) - 9px); background-color: #EAEAEA; } .box .box-con:nth-of-type(1), .box .box-con:nth-of-type(2) { margin-bottom: 18px; } .box .box-con:nth-of-type(2n) { margin-left: 18px; } .content_box { width: 100%; height: 100%; float: left; } .content_box iframe { width: 100%; height: calc( 100% - 38px); cursor: alias !important; } .content_box p { font-size: 14px; font-weight: bold; background-color: #323639; color: #fff; height: 36px; line-height: 36px; padding-left: 10px; } /* .itin { width: 340px; font-size: 16px; font-weight: bold; background-color: #323639; color: #fff; */ /* padding-left: 10px; } */ .showtcdiv { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; z-index: 99; background-color: #fff; } .showtcdiv-title { font-size: 14px; font-weight: bold; background-color: #323639; color: #fff; height: 36px; line-height: 36px; padding: 0 12px; position: relative; } .showtcdiv-title span { position: absolute; left: calc( 50% - 100px); font-size: 13px; } .showtcdiv-title em { font-style: normal; font-size: 15px; color: #fff; } .showtcdiv-con { height: 100%; } .box-l, .box-r { width: calc( 50% - 9px); } .box-r { display: flex; flex-wrap: wrap; margin-left: 9px; } /* .showtcdiv::-webkit-scrollbar { width: 5px !important; height: 5px !important; } */ .box-l { border: 1px solid #E6E6E6; margin-right: 9px; border-top: 0px; border-bottom: 0px; } .box-l .boxL-title { background-color: #FAFAFA; line-height: 50px; height: 50px; padding: 0 20px; font-size: 16px; color: #333; font-weight: bold; border-bottom: 1px solid #E6E6E6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'arial'; } .box-l .pdfleft { width: 100%; height: calc( 100% - 50px); } </style> </head> <body> <div class="box"> <div class="box-l"> <p class="boxL-title" title=""> <span>项目名称：</span> <span class="projectName"></span> </p> <iframe class="pdfleft" frameborder="0"></iframe> </div> <div class="box-r"> <div class="box-con"> <div class="content_box"> <p>上位规划</p> <iframe class="iframe1" id="iframe1" src="" frameborder="0"></iframe> </div> </div> <div class="box-con"> <div class="content_box"> <p>调整前规划用地</p> <iframe class="iframe2" id="iframe2" src="" frameborder="0"></iframe> </div> </div> <div class="box-con"> <div class="content_box"> <p>调整后规划用地</p> <iframe class="iframe3" id="iframe3" src="" frameborder="0"></iframe> </div> </div> <div class="box-con"> <div class="content_box"> <p>城市设计</p> <iframe class="iframe4" id="iframe4" src="" frameborder="0"></iframe> </div> </div> </div> </div> <div class="showtcdiv"> <div class="showtcdiv-con"> <p class="showtcdiv-title"><em>城市设计</em> <span>按住Ctrl键+鼠标滚轮可缩放图例</span></p> <iframe class="iframe5" id="iframe5" width="100%" style="height: calc( 100% - 32px );" src="" frameborder="0"></iframe> </div> </div> <script> jQuery(function() { var iframe1url = "" var iframe2url = "" var iframe3url = "" var iframe4url = "" var iframe5url = "" init() // 页面初始化 function init() { // 给pdf赋值src let projectid = $request("projectid") let flowcode = $request("flowcode") let projecttype = $request("projecttype") let ntcodekey = "" let pars = { "project_id": projectid } // 初始化页面渲染 let getres = $lzpost(window.$apphost("common") + '/api/shghbzspxt/getlist', pars).returnValue; let default_req_mode = getres.data.project_name; jQuery(".boxL-title").attr("title", default_req_mode) jQuery(".projectName").text(default_req_mode) let tzh = "tzh", tzq = "tzq", cssj = "cssj", swgh = "swgh", xmqk = "xmqk"; let mid = '' let index; jQuery.getJSON('./js/tip.json', function(data) { console.log(data) let array = data[projecttype]; for (let i = 0; i < array.length; i++) { const element = array[i]; if (element.flowcode == flowcode) { index = i } } // ntcode = data[projecttype][index].nodecode[tzh] getmid(tzh, data[projecttype][index].nodecode[tzh]); getmid(tzq, data[projecttype][index].nodecode[tzq]); getmid(cssj, data[projecttype][index].nodecode[cssj]); getmid(xmqk, data[projecttype][index].nodecode[xmqk]); getmid(swgh, data[projecttype][index].nodecode[swgh]); // ylwj(); }) // 根据项目id和资料树节点编码获取附件id function getmid(codename, ntcode) { let urlqu = `/serverapp/api/shghbzspxt/material/project/${projectid}/tn_code/${ntcode}` let tokenshowpdf = top.window.$token(); let datares = $lzget(urlqu).value mid = datares ntcodekey = codename switch (ntcodekey) { case "xmqk": if (mid) iframe5url = "/utility/3rd/browse-pdf-3.11/web/viewerleft.html?file=" + encodeURIComponent(window.$lzapphost.fileserver + `/documenttree/preview/${mid}?tokenid=${tokenshowpdf}`); jQuery('.pdfleft').attr('src', iframe5url) // iframeOnloadEnd("pdfleft", iframe5url) break; case "swgh": if (mid) iframe1url = "/utility/3rd/browse-pdf-3.11/web/viewer.html?file=" + encodeURIComponent(window.$lzapphost.fileserver + `/documenttree/preview/${mid}?tokenid=${tokenshowpdf}`) jQuery('.iframe1').attr('src', iframe1url) iframeOnloadEnd("iframe1", iframe1url) break; case "tzq": if (mid) iframe2url = "/utility/3rd/browse-pdf-3.11/web/viewer.html?file=" + encodeURIComponent(window.$lzapphost.fileserver + `/documenttree/preview/${mid}?tokenid=${tokenshowpdf}`) jQuery('.iframe2').attr('src', iframe2url) iframeOnloadEnd("iframe2", iframe2url) break; case "tzh": if (mid) iframe3url = "/utility/3rd/browse-pdf-3.11/web/viewer.html?file=" + encodeURIComponent(window.$lzapphost.fileserver + `/documenttree/preview/${mid}?tokenid=${tokenshowpdf}`) jQuery('.iframe3').attr('src', iframe3url) iframeOnloadEnd("iframe3", iframe3url) break; case "cssj": if (mid) iframe4url = "/utility/3rd/browse-pdf-3.11/web/viewer.html?file=" + encodeURIComponent(window.$lzapphost.fileserver + `/documenttree/preview/${mid}?tokenid=${tokenshowpdf}`) jQuery('.iframe4').attr('src', iframe4url) iframeOnloadEnd("iframe4", iframe4url) break; } // fzurl() } function fzurl() { debugger var iframe1url = "/lzfile/1831160914645225476/wu_1j8iae33k97d4qu83i1m51fo17.pdf" // var iframe2url = "/lzfile/1831160914875912194/wu_1j8iadgeh1b556e395e6hr13ld7.pdf" // var iframe3url = "/lzfile/1831160914875912194/wu_1j8iadgeh1b556e395e6hr13ld7.pdf" // var iframe4url = "/lzfile/1831160914875912194/wu_1j8iadgeh1b556e395e6hr13ld7.pdf" // var iframe5url = "/lzfile/1831160914875912194/wu_1j8iadgeh1b556e395e6hr13ld7.pdf" if (iframe1url) { } debugger var pdffurl2 = '/utility/3rd/browse-pdf-3.11/web/viewer.html?file=' + iframe2url var pdffurl3 = iframe3url var pdffurl4 = '/utility/3rd/browse-pdf-3.11/web/viewer.html?file=' + iframe4url var pdffurl5 = '' // var pdfleft = '/utility/3rd/browse-pdf-3.11/web/viewerleft.html?file=' + $lzapphost.fileserver + iframe1url jQuery('.iframe1').attr('src', "/utility/3rd/browse-pdf-3.11/web/viewer.html?file=window.$lzapphost.fileserver/lzfile/1831160914645225476/wu_1j8iae33k97d4qu83i1m51fo17.pdf") jQuery('.iframe2').attr('src', pdffurl2) jQuery('.iframe3').attr('src', pdffurl3) jQuery('.iframe4').attr('src', pdffurl4) jQuery('.iframe5').attr('src', pdffurl1) jQuery('.pdfleft').attr('src', pdfleft) // 添加默认触发事件 iframeOnloadEnd("iframe1", iframe1url) iframeOnloadEnd("iframe2", iframe2url) iframeOnloadEnd("iframe3", iframe3url) iframeOnloadEnd("iframe4", iframe4url) // iframeOnloadEnd("iframe5", iframe4url) } } function iframeOnloadEnd(iframeName, pdfurl) { debugger var iframeparam = document.getElementById(iframeName); iframeparam.onload = function() { // 默认页面适合 jQuery("#" + iframeName).contents().find("select[id='scaleSelect']").change(function() { jQuery("#" + iframeName).contents().find("#scaleSelect").find("option[value='page-fit']").prop("selected", true); }); // 打开文档 debugger jQuery("#" + iframeName).contents().find(".fd-button").click(function() { let titlename = jQuery("#" + iframeName).prev().text() jQuery(".showtcdiv-title em").text(titlename) if (iframeName == "iframe3") { jQuery('.iframe5').attr('src', iframe3url.replace("viewer.html", "viewerbig.html")) } else if (iframeName == "iframe1") { jQuery('.iframe5').attr('src', iframe1url.replace("viewer.html", "viewerbig.html")) } else if (iframeName == "iframe2") { jQuery('.iframe5').attr('src', iframe2url.replace("viewer.html", "viewerbig.html")) } else if (iframeName == "iframe4") { jQuery('.iframe5').attr('src', iframe4url.replace("viewer.html", "viewerbig.html")) } var iframelo5 = document.getElementById("iframe5"); // jQuery(".iframe5").contents().find("#viewerContainer").removeClass("ovhi") iframelo5.onload = function() { jQuery('.iframe5').contents().find(".fd-button").hide(); jQuery('.iframe5').contents().find(".sx-button").show(); jQuery("#iframe5").contents().find("#cursorHandTool").trigger("click") jQuery("#iframe5").contents().find(".sx-button").click(function() { jQuery(".showtcdiv").hide(); }) } jQuery(".showtcdiv").show(); }) setTimeout(() => { // jQuery("#iframe1").contents().find("#cursorHandTool").trigger("click") defaultTriggerMe("#" + iframeName, "#cursorHandTool", "page-fit") }, 500); } } // 默认触发事件 function defaultTriggerMe(iframeName, idName, idName2) { jQuery(iframeName).contents().find(idName).trigger("click") // jQuery(iframeName).contents().find(idName2).trigger("click") } }) </script> </body> </html>