摘要：接下來，亮出自己做的簡歷。登錄進入后，就可以選擇一個你喜歡的簡歷模板進行制作簡歷了。將頁面左邊的工具欄拿掉，然后將簡歷寬度放大到接近瀏覽器寬度即可達到像素最高的效果。此外，會自動保存你做的簡歷，方便下次編輯。

以下文章摘自我的博客，原文鏈接

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

簡述下原理：首先找一個可以在線制作簡歷并提供簡歷模板的網(wǎng)站，然后在模板上填好自己的信息，并做好相關(guān)內(nèi)容的排版，接下來再導(dǎo)出簡歷即可。正常情況下，這種提供在線制作簡歷的網(wǎng)站都會收取一定的費用才允許你導(dǎo)出制作好的簡歷，或者，你也可以選擇網(wǎng)頁滾動截圖截取簡歷的那部分，然后打印即可，這個免費。

接下來，亮出自己做的簡歷。

接下來就開始制作簡歷。

目前為止，我發(fā)現(xiàn)還不錯的在線簡歷制作網(wǎng)站有 2 個：

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

五百丁 - 好用的簡歷制作工具 , 不解釋（國內(nèi)）

五百丁是最早知道的一個在線簡歷制作網(wǎng)站，Canva 是最近才發(fā)現(xiàn)的國外的在線簡歷制作網(wǎng)站。說說體驗吧，五百丁明顯在排版簡歷內(nèi)容時沒有 Canva 效果好，不僅排版難看，還卡，就沖這個，就選擇 Canva 了。（希望五百丁的開發(fā)者多多進行優(yōu)化）

注冊一個賬號就可以進入 Canva 了，或者可以直接用 Google 賬號進行登錄。

登錄進入 Canva 后，就可以選擇一個你喜歡的簡歷模板進行制作簡歷了。

選好模板后，由于它這里的模板的長寬比例可能和我們打印時用的 A4 紙的長寬比例不一樣，所以需要做一下調(diào)整，即將這個簡歷的長寬比例設(shè)置為 A4 紙的比例。A4 紙的長寬比例約為 1.414。

打開瀏覽器控制端（F12），執(zhí)行以下代碼。

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

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

// 動態(tài)將這個元素的長寬比例設(shè)置為 A4 紙的比例大小
// 這里不能直接設(shè)置元素的長寬，因為服務(wù)器會在一段時間內(nèi)自動將元素的長寬設(shè)置為最開始的長寬
// 所以我們這里進行動態(tài)更改
document.body.onmouseover = function(){
  content.style.height = Number.parseInt(content.style.width,10)*1.414+"px";
};

這樣設(shè)置好以后，會發(fā)現(xiàn)簡歷下面多了一些紅色的部分，這時需要你將簡歷最下面的點拖動到剛好覆蓋紅色的部分。問題又來了，下面還有一個礙眼的家伙（Add a new page）。那好辦，把它處理掉。

// 找到這個元素，直接為它添加內(nèi)聯(lián) CSS
display: none;

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

好了，準備妥當后，就可以進行制作了。下面寫一些制作技巧。

在制作的頁面左邊有一個工具欄，可以在里面搜索或添加你想要的元素或布局（圖標元素、形狀、圖片、布局、好看的線條、文本框等）

在布局前，不妨先看看一些操作的快捷鍵---Keyboard shortcuts

在布局時，可以直接靈活地拖動元素進行排版

拖動時，按住 shift 鍵，可以做微調(diào)

強調(diào)一個特別有用的操作： 按住 shift，然后依次點擊你想要選中的元素，即可選擇多個元素，然后點擊上面菜單欄的 Group，即可對這幾個元素進行組合

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

到了這一步，假設(shè)你已經(jīng)制作完了，就剩下導(dǎo)出了。問題又來了，這個網(wǎng)站的付費導(dǎo)出收的是美元（一次一美元吧），就算我想付款，但是我沒有國外的銀行卡啊（麻蛋，不支持支付寶就算了，居然連國外的 PayPal 也不支持）。懵逼了，我可能打開了假的網(wǎng)站~

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

喜出望外，網(wǎng)上有這個問題的解決方法，比如有個 jsPdf.js 庫，提供了一些 API 可以將 HTML 元素直接轉(zhuǎn)為 pdf，不過要同時裝一個依賴庫 html2canvas.js。

利用這兩個庫，我就試著編寫了一些代碼在本地頁面上進行了測試，成功將本地頁面的全部或部分內(nèi)容轉(zhuǎn)為 pdf（全部轉(zhuǎn)或部分轉(zhuǎn)這個看你怎么設(shè)置了）。但是在這個在線簡歷制作的網(wǎng)站上的實驗結(jié)果就不那么樂觀了，基本上只能在下載的 pdf 文件里看到簡歷的一部分，并且 pdf 里簡歷內(nèi)容的排版和我們實際的排版不一樣。

又折騰了半天，終于發(fā)現(xiàn)原因了。通過 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.

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

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

習(xí)慣性地打開 Google 瀏覽器上安裝的截圖插件（Awesome Screenshot），進行滾動截圖，卻發(fā)現(xiàn)網(wǎng)頁無法滾動。再一次懵逼~

可能是這個網(wǎng)頁對這些截圖插件有限制吧，所以不能滾動截圖。

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

// 我下載的版本是 snagit 13.1.1，下面是網(wǎng)上找的注冊碼
// 一個一個試，我試了第一個就能用

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

安裝好以后，熟悉熟悉軟件就可以開始截圖了。

不過在截圖之前，為了使截圖時得到像素最高的圖片，所以在做一下小調(diào)整。將頁面左邊的工具欄拿掉，然后將簡歷寬度放大到接近瀏覽器寬度即可達到像素最高的效果。

// 找到這個元素，直接為它添加內(nèi)聯(lián) CSS
display: none;

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

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

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

好了，到此簡歷已經(jīng)成功轉(zhuǎn)為 pdf。 *_*

此外，Canva 會自動保存你做的簡歷，方便下次編輯。（非常人性化的服務(wù)，贊贊贊）

好了，到這里就結(jié)束了，準備找實習(xí)了。^_^