如何在你的个人网站上显示PDF简历——PDF.js

下面介绍让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文件即可。
使用方法：

https://drive.google.com/viewerng/viewer?embedded=true&url=https://leonning.com/wp-content/uploads/2019/07/1562145603-example.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查看器，无需翻墙。

快速部署方法：

1. 确保你网站上安装了Tomcat
2. 下载我打包和配置好的war包 http://e.ning.ee/pdf.war
3. 部署到Tomcat的webapps目录下
4. 启动Tomcat，Tomcat会自动解压pdf.war，访问/index.html 测试
5. 把myResume.pdf换成你想要显示的简历.PDF文件（文件名不能变）
6. 想修改文件名参考下下面方法

不带参数 访问index.html， 默认是打开 myResume.pdf 这个文件名的。

如果想改变可以 打开/viewer.js，搜索“ defaultUrl ”，修改value成你想要的路径。

也可以不修改，带参数访问index.html。如：
index.html?file=example.pdf

PDF.js效果图：

总结

这里推荐PDF.js，功能强大，兼容性好。
你可以在自己网站上部署一份个人线上简历了。