浏览器预览pdf资源文件

327 阅读1分钟

1.通过iframe,embed,object标签预览

但是iframe会被谷歌浏览器拦截,embed是闭合标签,如果在不支持的浏览器中,只有空白一片,object兼容性好,类似iframe

谷歌会默认拦截这些标签打开新链接,想要解决,只能返回文件流,通过文件流生成blob对象,然后通过window.URL.createObjectURL生成链接,赋值给标签的src属性

2.通过window.open直接打开链接

这种方式会被浏览器拦截,通过以下方法进行尝试

2.1 form的submit事件。尝试失败

2.2 js创建a标签,将url赋值给标签href,模拟点击,但是谷歌会识别是否是代码触发,是的话依旧会拦截。尝试失败

2.3 通过延迟方法调用window.open打开链接。尝试失败

***2.4 先打开一个空白页(可以新建一个loading页面),然后替换新页面的location地址。尝试成功 ***

3.通过插件pdfjs

这种情况下pdf文件会被转换成canvas进行绘制,比较慢,但是可定制化强。只是跟项目需求不合,放弃。

4.通过a标签点击,直接打开链接

链接必须是公共可访问的。而且谷歌浏览器上点击就会下载,IE上可以倒是可以选择是预览还是下载。

5.直接在当前页面展示pdf资源链接

项目中会异步生成pdf链接,通过尝试以上方法后,最后选择直接在当前页面替换内容为pdf链接,over。