pdf文档插件 viewer.js用法
设置页面默认大小const DEFAULT_SCALE_VALUE page-fit; page-fit可修改其他//修改默认放大倍数 viewer.jscase page-width: scale pageWidthScale*1.4; break;//或者 viewer.htmlPDFViewerApplication.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?filehttp%3A%2F%2F192.168.16.250%3A8088%2Ffileserver%2Fdocumenttree%2Fpreview%2F1988853001434976258%3Ftokenid%3DNjE5NGFkNTMtMzYzZi00MmFlLTkxNGQtN2EwYzEzMTJhODdiiframe3url /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.jsjQuery(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.jswebViewerWheel方法里面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 iframenamewindow.frameElement.id; console.log(iframe:iframename,dx,dy);window.parent.postMessage({type: getscale,value:currentScale,dx:pdfViewer.container.scrollLeft,dy:dy, iframe:iframename}, *);}fileControst.htmlwindow.addEventListener(message,function (e){ if(e.data.typegetscale){ debugger; let currentScalee.data.value,dxe.data.dx,dye.data.dy,iframee.data.iframe; // let optionlenjQuery(.content_box).find(#iframe2).contents().find(body).find(#scaleSelect).find(option[valuecurrentScale]).length // if(optionlen0){ // jQuery(.content_box).find(#iframe1).contents().find(body).find(#scaleSelect).append(option value${currentScale} classhide${Math.round(currentScale*100)%}/option); // } // jQuery(.content_box).find(#iframe1).contents().find(body).find(#scaleSelect).val(currentScale).trigger(change) // // 触发自定义事件将key和value作为参数传递 if(iframeiframe2){ 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.htmljQuery(function () { // 获取原生DOM元素并触发原生change事件 window.addEventListener(message, function(event) { if (event.data.type dataChange2) { // 处理数据变化 let scale event.data.value; let dxevent.data.dx; let dyevent.data.dy; let iframeevent.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(scaleCorrectionFactor0){ // PDFViewerApplication.pdfViewer.container.scrollLeftdx; // PDFViewerApplication.pdfViewer.container.scrollTopdy; // }else{ // PDFViewerApplication.pdfViewer.container.scrollLeftdx* scaleCorrectionFactor; // PDFViewerApplication.pdfViewer.container.scrollTopdy* scaleCorrectionFactor; // } // }); PDFViewerApplication.pdfViewer.container.scrollLeftdx; PDFViewerApplication.pdfViewer.container.scrollTopdy } }); });页面实例!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivCache-Control contentno-cache, no-store, must-revalidate / meta http-equivPragma contentno-cache / meta http-equivExpires content0 / script src/utility/lzmain.js/script !-- script src/utility/lzmain-form.js/script -- link relstylesheet 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 classbox div classbox-l p classboxL-title title span项目名称/span span classprojectName/span /p iframe classpdfleft frameborder0/iframe /div div classbox-r div classbox-con div classcontent_box p上位规划/p iframe classiframe1 idiframe1 src frameborder0/iframe /div /div div classbox-con div classcontent_box p调整前规划用地/p iframe classiframe2 idiframe2 src frameborder0/iframe /div /div div classbox-con div classcontent_box p调整后规划用地/p iframe classiframe3 idiframe3 src frameborder0/iframe /div /div div classbox-con div classcontent_box p城市设计/p iframe classiframe4 idiframe4 src frameborder0/iframe /div /div /div /div div classshowtcdiv div classshowtcdiv-con p classshowtcdiv-titleem城市设计/em span按住Ctrl键鼠标滚轮可缩放图例/span/p iframe classiframe5 idiframe5 width100% styleheight: calc( 100% - 32px ); src frameborder0/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?filewindow.$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[idscaleSelect]).change(function() { jQuery(# iframeName).contents().find(#scaleSelect).find(option[valuepage-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