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%