前几天做一个网页上查看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();
}
}