其實，前端還能夠這樣作簡歷

如下文章摘自個人博客，原文連接

下面的簡歷圖片不上傳了，想看的點擊原文連接就能看到了。

簡述下原理：首先找一個能夠在線製做簡歷並提供簡歷模板的網站，而後在模板上填好本身的信息，並作好相關內容的排版，接下來再導出簡歷便可。正常狀況下，這種提供在線製做簡歷的網站都會收取必定的費用才容許你導出製做好的簡歷，或者，你也能夠選擇網頁滾動截圖截取簡歷的那部分，而後打印便可，這個免費。

接下來，亮出本身作的簡歷。

---

接下來就開始製做簡歷。

目前爲止，我發現還不錯的在線簡歷製做網站有 2 個：

• Canva - Empowering the world to design.（國外）

• 五百丁 - 好用的簡歷製做工具 , 不解釋（國內）

五百丁是最先知道的一個在線簡歷製做網站，Canva 是最近才發現的國外的在線簡歷製做網站。說說體驗吧，五百丁明顯在排版簡歷內容時沒有 Canva 效果好，不只排版難看，還卡，就衝這個，就選擇 Canva 了。（但願五百丁的開發者多多進行優化）

註冊一個帳號就能夠進入 Canva 了，或者能夠直接用 Google 帳號進行登陸。

登陸進入 Canva 後，就能夠選擇一個你喜歡的簡歷模板進行製做簡歷了。

選好模板後，因爲它這裏的模板的長寬比例可能和咱們打印時用的 A4 紙的長寬比例不同，因此須要作一下調整，即將這個簡歷的長寬比例設置爲 A4 紙的比例。A4 紙的長寬比例約爲 1.414。

打開瀏覽器控制端（F12），執行如下代碼。

// 獲取恰巧只包含簡歷的元素
var content = document.querySelectorAll('.page');
content = content[content.length-1];

// 爲這個元素添加背景色，爲了明顯，我添加了紅色
content.style.backgroundColor = 'red';

// 動態將這個元素的長寬比例設置爲 A4 紙的比例大小
// 這裏不能直接設置元素的長寬，由於服務器會在一段時間內自動將元素的長寬設置爲最開始的長寬
// 因此咱們這裏進行動態更改
document.body.onmouseover = function(){
  content.style.height = Number.parseInt(content.style.width,10)*1.414+'px';
};

這樣設置好之後，會發現簡歷下面多了一些紅色的部分，這時須要你將簡歷最下面的點拖動到恰好覆蓋紅色的部分。問題又來了，下面還有一個礙眼的傢伙（Add a new page）。那好辦，把它處理掉。

// 找到這個元素，直接爲它添加內聯 CSS
display: none;

// 或者能夠直接在控制端運行下面代碼
// 這個方法有效的前提是這個元素的 ID 沒變，仍是 addNewPage
var addNewPage = document.getElementById('addNewPage');
addNewPage.style.display = 'none';

好了，準備穩當後，就能夠進行製做了。下面寫一些製做技巧。

• 在製做的頁面左邊有一個工具欄，能夠在裏面搜索或添加你想要的元素或佈局（圖標元素、形狀、圖片、佈局、好看的線條、文本框等）

• 在佈局前，不妨先看看一些操做的快捷鍵---Keyboard shortcuts

• 在佈局時，能夠直接靈活地拖動元素進行排版

• 拖動時，按住 shift 鍵，能夠作微調

• 強調一個特別有用的操做： 按住 shift，而後依次點擊你想要選中的元素，便可選擇多個元素，而後點擊上面菜單欄的 Group，便可對這幾個元素進行組合

• 按住 Ctrl，滾動鼠標滑輪，便可對簡歷進行放大縮小

到了這一步，假設你已經制做完了，就剩下導出了。問題又來了，這個網站的付費導出收的是美圓（一次一美圓吧），就算我想付款，可是我沒有國外的銀行卡啊（麻蛋，不支持支付寶就算了，竟然連國外的 PayPal 也不支持）。懵逼了，我可能打開了假的網站~

遇到問題去 Google ：how to convert html element to pdf ?

喜出望外，網上有這個問題的解決方法，好比有個 jsPdf.js 庫，提供了一些 API 能夠將 HTML 元素直接轉爲 pdf，不過要同時裝一個依賴庫 html2canvas.js。

利用這兩個庫，我就試着編寫了一些代碼在本地頁面上進行了測試，成功將本地頁面的所有或部份內容轉爲 pdf（所有轉或部分轉這個看你怎麼設置了）。可是在這個在線簡歷製做的網站上的實驗結果就不那麼樂觀了，基本上只能在下載的 pdf 文件裏看到簡歷的一部分，而且 pdf 裏簡歷內容的排版和咱們實際的排版不同。

又折騰了半天，終於發現緣由了。經過 html2canvas.js 捕捉到的 HTML 元素可能和原來的元素排版上會有不一樣，而且簡歷的頁面還有 SVG 代碼，因此不折騰這個方法了，棄坑。

html2canvas.js
JavaScript HTML renderer
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

不過說實話，上面這兩個庫仍是蠻不錯的，哈哈。

改用老辦法吧，滾動截圖。

習慣性地打開 Google 瀏覽器上安裝的截圖插件（Awesome Screenshot），進行滾動截圖，卻發現網頁沒法滾動。再一次懵逼~

多是這個網頁對這些截圖插件有限制吧，因此不能滾動截圖。

既然這樣，你限制了瀏覽器的截圖插件，我不信你也能限制專門的截圖軟件。網上就搜索了一下，找到一個挺不錯的截圖軟件：snagit。而後下載安裝。

// 我下載的版本是 snagit 13.1.1，下面是網上找的註冊碼
// 一個一個試，我試了第一個就能用

FFC2M-Z59RE-QLACP-C5MBV-M8RMB

3KDPC-35ADD-CVG2U-5XU6C-MF3AF

6BANC-FN3C4-DACAW-AMXHS-D5C3C

3AHYA-EMM5P-FTAYS-C9HMP-Y639E

HLADM-6UL48-27WA4-C9HH5-L326C

HML6E-CZMVY-QNY3C-CSAFH-AEC35

DQTXN-6JDSD-ZNDDP-CQAKH-AAAMC

安裝好之後，熟悉熟悉軟件就能夠開始截圖了。

不過在截圖以前，爲了使截圖時獲得像素最高的圖片，因此在作一下小調整。將頁面左邊的工具欄拿掉，而後將簡歷寬度放大到接近瀏覽器寬度便可達到像素最高的效果。

// 找到這個元素，直接爲它添加內聯 CSS
display: none;

// 或者能夠直接在控制端運行下面代碼
// 這個方法有效的前提是這個元素的 ID 沒變，仍是 objectPanel
var addNewPage = document.getElementById('objectPanel');
addNewPage.style.display = 'none';

接下來進行滾動截屏，打開 snagit 軟件，最左邊選擇 Image 選項，而後 Selection 項選擇 Panoramic 選項便可開始滾動截圖。

截圖完畢後，截取的圖片會自動在 snagit editor 裏打開，方便編輯，而後在最上邊的菜單欄依次操做：File-->Print-->Print 便可進行打印。

好了，到此簡歷已經成功轉爲 pdf。 *_*

此外，Canva 會自動保存你作的簡歷，方便下次編輯。（很是人性化的服務，贊贊贊）

好了，到這裏就結束了，準備找實習了。^_^