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%