下面介绍让PDF在HTML中显示的几种方法
关键词: PDF.js Google PDF查看器 < iframe >标签
第一种:直接在浏览器打开
https://leonning.com/wp-content/uploads/2019/07/1562145603-example.pdf
例如此,这样最简单,但是某些PC端浏览器不支持,移动端我测试iOS的Safari无法打开。
第二种:用HTML5的标签引入
< iframe >标签
<iframe src="/index.pdf" width="100%" height="100%"> This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a> </iframe>
< embed >标签
<embed src="/index.pdf" type="application/pdf" width="100%" height="100%">
< iframe >标签 与 < embed >标签 区别:
1、 < iframe > 标签可以在内部放置文本,可以在无法显示的浏览器上提供下载地址,而 < embed >标签 若无法显示就没有内容。
2、 < embed >标签是自闭合的。
还有个< object >标签功能与< iframe >标签 类似,支持内部文本显示。
几种标签混合使用可以使得兼容性更强,
比如 < object >标签功能与< embed > 混合使用:
<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px"> <embed src="http://yoursite.com/the.pdf" type="application/pdf"> </object>
以及,
< object >标签功能与< iframe > 混合使用
<object data="/index.pdf" type="application/pdf" width="100%" height="100%"> <iframe src="/index.pdf" width="100%" height="100%" style="border: none;"> This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a> </iframe> </object>
上面这种方法很方便,无需引入JavaScript 库。
但是我测试在我的浏览器上无法正常显示。(Chromium V69.0.3497.100和 Microsoft Edge )
修改:后期我将这个页面放到Tomcat项目中部署后发现能显示,但PDF右侧会出现两条HTML滚动条,可能有什么办法可以取消掉。
并且移动端某些浏览器扔有支持问题,比如 Android上的Chrome浏览器 。
第三种:Google PDF查看器
这种最方便,引入 Google PDF查看器 查看你传入云盘或者你的网站上的PDF文件即可。
使用方法:
把url= 后面的地址换成你的PDF文件地址即可。
这种方法很简单,兼容性也很好,测试过iOS上能加载,
但是Google的服务在国内,你懂的。
第四种:引入第三方 JavaScript 库——如PDF.js
“
PDF.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件,非常强大,能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析。
”
这个插件很强大,可以自己定制很多东西,有兴趣的可以去官方项目看。
https://mozilla.github.io/pdf.js/
这里直接给出结论和使用方法:
PDF.js在PC端和移动端的浏览器上都能很好的兼容,且一次部署到你的网站,可以以传参的方式多次使用,相当于你自己的Google PDF查看器,无需翻墙。
快速部署方法:
- 确保你网站上安装了Tomcat
- 下载我打包和配置好的war包 http://e.ning.ee/pdf.war
- 部署到Tomcat的webapps目录下
- 启动Tomcat,Tomcat会自动解压pdf.war,访问/index.html 测试
- 把myResume.pdf换成你想要显示的简历.PDF文件(文件名不能变)
- 想修改文件名参考下下面方法
不带参数 访问index.html, 默认是打开 myResume.pdf 这个文件名的。
如果想改变可以 打开/viewer.js,搜索“ defaultUrl ”,修改value成你想要的路径。
也可以不修改,带参数访问index.html。如:
index.html?file=example.pdf
PDF.js效果图:


总结
易用性 | 兼容性 | 墙内实用性 | |
直接打开 | √ | × | √ |
HTML5的标签 | √ | × | √ |
Google PDF查看器 | √ | √ | × |
PDF.js | × | √ | √ |
这里推荐PDF.js,功能强大,兼容性好。
你可以在自己网站上部署一份个人线上简历了。
测试了一下,这个js确实强大
你的统计出bug了吧,今日IP只有4?
是正常的,百度统计、谷歌站长也是这个数,小网站访问的人少,刚开始不用太在意。