一个前端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脚本进行懒人服务器搭建

最后

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

转载于:https://juejin.im/post/5a93caec6fb9a06348538387