一个前端er使用浏览器打印功能快速制做PDF简历

前言

过年完回来，从广州搬回了佛山居住，打算换一份佛山的工做，在准备简历的时候，想起以前在公司负责过一个浏览器打印的功能，能够利用这个原理，快速生成一个pdf简历，甚至乎加上媒体查询，放本身服务器上面作成在线简历

好处

1. 能够随时修改更新本身的简历
2. 快速生成pdf进行投递
3. 放服务器还能够方便分享浏览
4. 甚至还能够作各类动效，展示本身的技能

简历准备

做为前端工做者，简历仍是须要点美观的，因此能够请顿饭让搞设计的朋友帮忙设计一个或者模版一个吧

制做

初步制做

1. 先弄个大概的样子，把简历制做成html的形式，若是要放服务器上面，建议最好就是对移动端作上适配，这样的话，手机发本身网址出去的时候，对方能够在手机上快速浏览。

2. 完成以后，在浏览器打开后，调出打印预览cmd+p/ctrl+p，先初步看看效果，记得要勾上选项里面的背景图形。mac下用谷歌甚至能够点击使用预览程序打开PDF直接看生成的pdf效果

适配移动端

1. 在适配移动端的时候，往常都会直接写@media (max-width: xxxpx){}这样形式的，在作了打印以后，必须加上@media srceen and (max-width: xxxpx){}这样的形式，否则会影响到打印的样式

2. 能够对手机号，邮箱作个小操做，在用户点击手机或者邮箱的时候，能够快速弹出拨打界面或者发邮件的界面

<!-- 弹出手机拨号 -->
<a href="tel:xxxxxx">xxxxxx</a>
<!-- 弹出邮箱 -->
<a href="mailto:xxx@xxx.com">xxx@xxx.com</a>
复制代码

适配打印

暂时每改一次样式都须要调出一次打印预览看效果，有点麻烦，没找到更好的解决办法...

1. 使用媒体查询@media print{}进行对打印的适配
2. 对于打印换页的问题，能够在想换页的dom节点加一个样式page-break-before: always，就能够实现当前元素开始新一页进行打印
3. 样式没问题以后，就能够在打印预览点击目标打印机，找到另存为PDF的选项，就能够存PDF到本地了

放服务器

[广告] 能够看看我第一篇文章：利用docker与shell脚本进行懒人服务器搭建

最后

不足之出，请求指出，十分感谢