其实，前端还可以这样做简历

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

下面的简历图片不上传了，想看的点击原文链接就能看到了。

简述下原理：首先找一个可以在线制作简历并提供简历模板的网站，然后在模板上填好自己的信息，并做好相关内容的排版，接下来再导出简历即可。正常情况下，这种提供在线制作简历的网站都会收取一定的费用才允许你导出制作好的简历，或者，你也可以选择网页滚动截图截取简历的那部分，然后打印即可，这个免费。

接下来，亮出自己做的简历。

---

接下来就开始制作简历。

目前为止，我发现还不错的在线简历制作网站有 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 会自动保存你做的简历，方便下次编辑。（非常人性化的服务，赞赞赞）

好了，到这里就结束了，准备找实习了。^_^