一個前端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腳本進行懶人服務器搭建

最後

不足之出，請求指出，十分感謝