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

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

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

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

接下來(lái)，亮出自己做的簡(jiǎn)歷。

接下來(lái)就開(kāi)始制作簡(jiǎn)歷。

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

Canva - Empowering the world to design.（國(guó)外）

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

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

注冊(cè)一個(gè)賬號(hào)就可以進(jìn)入 Canva 了，或者可以直接用 Google 賬號(hào)進(jìn)行登錄。

登錄進(jìn)入 Canva 后，就可以選擇一個(gè)你喜歡的簡(jiǎn)歷模板進(jìn)行制作簡(jiǎn)歷了。

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

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

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

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

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

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

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

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

好了，準(zhǔn)備妥當(dāng)后，就可以進(jìn)行制作了。下面寫一些制作技巧。

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

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

在布局時(shí)，可以直接靈活地拖動(dòng)元素進(jìn)行排版

拖動(dòng)時(shí)，按住 shift 鍵，可以做微調(diào)

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

按住 Ctrl，滾動(dòng)鼠標(biāo)滑輪，即可對(duì)簡(jiǎn)歷進(jìn)行放大縮小

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

遇到問(wèn)題去 Google ：how to convert html element to pdf ?

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

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

又折騰了半天，終于發(fā)現(xiàn)原因了。通過(guò) html2canvas.js 捕捉到的 HTML 元素可能和原來(lái)的元素排版上會(huì)有不同，并且簡(jiǎn)歷的頁(yè)面還有 SVG 代碼，所以不折騰這個(gè)方法了，棄坑。

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.

不過(guò)說(shuō)實(shí)話，上面這兩個(gè)庫(kù)還是蠻不錯(cuò)的，哈哈。

改用老辦法吧，滾動(dòng)截圖。

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

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

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

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

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

安裝好以后，熟悉熟悉軟件就可以開(kāi)始截圖了。

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

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

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

接下來(lái)進(jìn)行滾動(dòng)截屏，打開(kāi) snagit 軟件，最左邊選擇 Image 選項(xiàng)，然后 Selection 項(xiàng)選擇 Panoramic 選項(xiàng)即可開(kāi)始滾動(dòng)截圖。

截圖完畢后，截取的圖片會(huì)自動(dòng)在 snagit editor 里打開(kāi)，方便編輯，然后在最上邊的菜單欄依次操作：File-->Print-->Print 即可進(jìn)行打印。

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

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

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