09.html使用iframe、embed查看pdf不显示(未解决)，使用pdf.js预览pdf

前几天做一个网页上查看pdf等文档的功能，然后网上查了一下发现可以使用iframe来预览，然后就去试了一下

<iframe width="100%" height="95%" seamless scrolling="yes" :src="iframeSrc"></iframe>

然后去试了一下，发现控制台报错，页面上iframe里面的body也是空的

Resource interpreted as Document but transferred with MIME type application/pdf:

去网上查了一下，也没有发现什么有用的信息，本来以为可能是返回时类型错误，然后在本地新建了一个静态html直接引用pdf文件路径，结果还是没有显示，而且控制台也报了上面那个错误，但是直接在浏览器地址栏输入pdf路径是可以直接显示的，就很疑惑

然后试了一下embed标签和object标签，embed是没有显示的，object貌似因为浏览器不支持，显示的是object里面写的文字

然后去找了一下其他的方法，用pdf.js预览pdf，参考文章：pdf.js使用方法 

 下载 pdf.js，解压后放到项目中，包含build、web文件夹和LICENSE文件，我这里放在了html/static/pdf下面

使用时地址   域名/html/static/pdf/viewer.html?file=文件在服务器中的地址

<iframe width="100%" height="95%" seamless scrolling="yes" :src="`${myhost}/html/static/pdf/web/viewer.html?file=${iframeSrc}`"></iframe>

我这里，myhost是在js获取的当前域名，iframeSrc是查询返回的文件地址，使用反引号``将字符包裹，${}里面是变量

这样就可以显示了

检查控制台发现他是将pdf文件解析，在canvas是绘制的

到此上面显示预览pdf就完成了，不过这个项目最后是要到移动端上用的，我在手机上面试了一下，发现全屏以后点击不能退出，返回按钮就退到上一页了，去网上搜了下，找到一个方法，重写全屏按钮，参考文章：JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误 

按照上面的方法，全屏显示顶部菜单栏不回隐藏，可以再次点击来退出全屏

但是在退出全屏时，手机上判断了document.webkitCancelFullScreen，但是没有执行函数document.webkitCancelFullScreen()，但是发现在全屏时执行全屏函数三次就会退出全屏，因为没有找到解决的办法，所以就在执行document.webkitCancelFullScreen()函数不成功时去执行全屏事件，所以才有了上面全屏时，点击三次退出全屏

  // 退出全屏
  function exitFullscreen() {
      if (document.exitFullscreen) {
          document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
      } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
      }
  }