如何在你的个人网站上显示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效果图:

PC端Chrome访问效果
微信内浏览器访问效果

总结

易用性兼容性墙内实用性
直接打开×
HTML5的标签×
Google PDF查看器 ×
PDF.js ×

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

3
说点什么

avatar
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Leonning奶爸de笔记 Recent comment authors
  Subscribe  
最新 最旧 得票最多
提醒
心灵博客
游客

测试了一下,这个js确实强大

奶爸de笔记
游客

你的统计出bug了吧,今日IP只有4?

分类目录

近期评论