实在,前端还能够如许做简历

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

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

简述下道理:首先找一个能够在线制造简历并供应简历模板的网站,然后在模板上填好本身的信息,并做好相关内容的排版,接下来再导出简历即可。一般情况下,这类供应在线制造简历的网站都邑收取肯定的用度才许可你导出制造好的简历,或许,你也能够挑选网页转动截图截取简历的那部份,然后打印即可,这个免费。

接下来,亮出本身做的简历。

《实在,前端还能够如许做简历》

接下来就最先制造简历。

目前为止,我发明还不错的在线简历制造网站有 2 个:

五百丁是最早晓得的一个在线简历制造网站,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 会自动保留你做的简历,轻易下次编辑。(异常人性化的效劳,赞赞赞)

好了,到这里就完毕了,预备找练习了。^_^

    原文作者:percy507
    原文地址: https://segmentfault.com/a/1190000008550481
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞