pdf.js使用和JS實現巢狀Iframe頁面F11全屏效果
1 Pdf.js使用
generic/web/viewer.html主要是渲染pdf閱讀器的樣式,而generic/web/viewer.js則是指定開啟的pdf檔案(當然還有其他功能,不過這些都不是我們關心的),我們看位於generic/web/viewer.js的一段程式碼:
var DEFAULT_URL ='20802.pdf';
我們可以看到,他預設開啟generic/web/20802.pdf.pdf檔案,再來看下面這段程式碼:
var file = 'file' inparams ? params.file : DEFAULT_URL;
這就告訴我們,可以通過傳遞file形參來動態指定開啟的pdf檔案!如:
http://localhost:8080/generic/web/viewer.html?file=qbs.pdf
下面我就介紹下,具體嵌入專案中是如何運用的!
可以把generic中的內容作為第三方外掛進行使用,
然後頁面可以使用<iframe>標籤來載入pdf
<iframesrc="<c:urlvalue="/resources/plugin/pdfJs/generic/web/viewer.html"/>?file=<c:url value="/publicity/displayPDF.do" />"width="100%" height="100%"></iframe>
實質就是我們直接訪問generic/web/viewer.html,然後為其指定一個file形參,用於指定開啟的pdf檔案!我上面使用的流的方式進行指定的。
上面只是一種簡單的使用方式,下面介紹一種複雜點的使用方式:
不知道大家有沒有試過下面這段url請求:
http://localhost:8080/akane/resources/plugin/pdfJs/generic/web/viewer.html?file=/akane/displayPDF.do?id=966c6f0e-3c06-4154-aafd-afdbee5bcb65
我們在實際應用中,可能會根據不同的引數,來選擇展示不同的pdf檔案,此時就涉及到傳參的問題了,仔細觀察上面這段url地址會發現,在file請求引數中的值為一個url地址,而這個url地址又追加了自己的請求引數,這就導致一個url地址中出現2個"?"
導致瀏覽器不能正常解析這段url!
pdf.js是webViewerInitialized函式中
var params =PDFView.parseQueryString(document.location.search.substring(1));
varfile = 'file' in params ? params.file : DEFAULT_URL;
對字串進行擷取
我的思想是:
var queryString = document.location.search.substring(1);
varfile = queryString;
直接獲取連結
2. JS實現巢狀Iframe頁面F11全屏效果
前面用iframe實現了巢狀pdf.js但是你能夠發現全屏按鈕沒有了
那是因為ifram中不能實現全屏功能
但在HTML5中,W3C制定了關於全屏的API,就可以實現全螢幕的效果
專案中需要將後臺瀏覽器的視窗全屏,也就是我們點選一個按鈕要實現按F11全屏的效果。 在HTML5中,W3C制定了關於全屏的API,就可以實現全螢幕的效果,也可以讓頁面中的圖片,視訊等全屏目前只有googlechrome 15 +, safri5.1+,firfox10+,IE11支援
實現:也是在webViewerInitialized函式中繫結id為presentationMode的button點選事件
document.getElementById('presentationMode').addEventListener('click',function(){
vardocElm = document.documentElement;
//W3C
if(docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
elseif (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
elseif (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
elseif (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
});
其中
if(!PDFViewerApplication.supportsFullscreen) {
document.getElementById('presentationMode').classList.add('hidden');
document.getElementById('secondaryPresentationMode').
classList.add('hidden');
}
判斷是否顯示全屏按鈕,我是把他隱藏的js去掉,也可以進一步的完善
另外:在 用IE11的時候全屏有可能不能顯示全部pdf檔案這樣只需在viewer.html中<htmldir="ltr" mozdisallowselectionprint moznomarginboxesstyle="width: 100%">寬度設為100%