其实，前端还能够这样作简历

如下文章摘自个人博客，原文连接

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

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

接下来，亮出本身作的简历。

---

接下来就开始制做简历。

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

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