本文属于原创文章,转载请注明--来自桃源小盼的博客

起因

每次换工作写简历都是有点痛苦的事情,尤其是下载word模板,各种注册流程,有的还得买积分,冲会员,甚是不爽。就算下载好了,修改其中的一些细节也不太熟悉各种功能,由于长期不用word,早把很多设置功能抛之脑后。

忽然有一天灵感涌上,这种简易的模板样式,对于一个前端工程师来说,写个页面分分钟的事,只要能把html转成pdf格式这事就成了。

Puppeteer

Puppeteer是谷歌出的一个headless自动化工具。

  • 利用网页生成PDF、图片
  • 抓取网站内容
  • 自动化表单提交、UI测试、键盘输入等
  • 创建一个最新的自动化测试环境

用来把html转换pdf,虽然是有点大材小用,但是很适合,渲染效果也是足够放心的。

install

# > Node v6.4.0
npm i puppeteer --save

但是安装这里有坑位,还好前人踩过坑了,失败的人点这里,笔者也是下载失败了~~~

index.html

具体怎么写得养眼,就是自己的事情了,这里提供一个简单的模板。

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的简历</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="content">
主要内容
</div>
</body>
</html>

gulpfile.js

既然想要写得爽,怎么也得来个热更新吧,搞个简单的自动化工具。
Puppeteer只能访问http地址,所以还需要静态资源服务

npm i --save browser-sync gulp gulp-notify
  • browser-sync 提供静态服务器和热更新
  • gulp 自动化工具
const gulp = require('gulp')
const notify = require('gulp-notify')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload // 热更新
gulp.task('styles', function () {
return gulp.src('src/*.css')
.pipe(reload({stream: true}))
.pipe(notify({message: 'Styles complete'}))
}); // 静态资源服务
gulp.task('serve', ['styles'], function () {
browserSync.init({
server: {
baseDir: "./src"
},
port: 7000,
// 关闭右上角通知
notify: false
}) gulp.watch('src/**/*.css', ['styles'])
gulp.watch('src/**/*.html', reload)
})

build.js

只差转换生成了,这里用到了await语法,否则层级太深。

(async function () {
const path = require('path')
const puppeteer = require('puppeteer')
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('http://localhost:7000')
await page.pdf({
path: 'resume.pdf',
format: 'A4',
// 打印背景色
printBackground: true
}) await browser.close()
console.info('build done')
})()

结语

最后写简历的事情,也被我们工程化了,想想也是省心省力。可以发挥我们的想象,加入各种好玩的东西,再也没人有跟我一样的简历样式了。

这里写了一个简单的项目,仅供参考demo地址

我用HTML写简历的更多相关文章

  1. 【转】IT职场人生系列之四:怎样写简历

    本文是IT职场人生系列的第四篇. 因为早年跳槽无数,所以积累了不少"技巧",逐渐变成写简历的"专家",最长的时候简历到了12页,所以现在练就一手写长篇博客的功夫 ...

  2. 怎么写简历,简历才不会被丢到非洲&#127757;

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 最近的三歪朋友圈可以看到很多的字节.腾讯的同学都 ...

  3. iOS开发,这样写简历才能让大厂面试官看重你!

    前言: 对于职场来说,简历就如同门面.若是没想好,出了差错,耽误些时日倒不打紧,便是这简历入不了HR的眼,费力伤神还不能觅得好去处,这数年来勤学苦练的大好光阴,岂不辜负? 简历,简而有力.是对一个人工 ...

  4. 用latex写简历

    最近终于逐渐掌握了用Latex写中文简历的问题.首先就是必须基于交大前辈bin yuan的模板进行学习. 如果有了一般论文撰写和Beamer做PPT的经验,不难发现resume的模板也是遵循一套程式的 ...

  5. 在github上写个人简历——最简单却又不容易的内容罗列

    前篇博客分享了一下自己初入github的过程,傻瓜式一步步搭建好主页后,终于该做正事儿了——写简历.在脑袋中构思了很多版本,最后终于决定,先写一个最传统的版本,于是我在箱子中翻出我word版本的简历, ...

  6. 在github上写个人简历——先弄个主页

    起因 不知道园友们在使用智联招聘等网站填写简历的时候对要求输入的内容有没有一种无力感,不吐槽了反正就一句话,按照它提供的格式我没法儿写简历,而且面试的时候总会被问道有没有自己作品,哥们儿天天上班,下班 ...

  7. 怎样写好一份IT技术岗位的简历

    10月是校园招聘的旺季,很多应届毕业生都忙碌起来了,从CSDN笔试-面试文章的火热程度,从我收到的简历就看得出来. 我很久没有参与笔试和面试了,所以只能从“简历”来阐述下我的看法. 截至目前,已经帮8 ...

  8. github上写个人简历

    随笔- 70  文章- 0  评论- 567  在github上写个人简历——先弄个主页   起因 不知道园友们在使用智联招聘等网站填写简历的时候对要求输入的内容有没有一种无力感,不吐槽了反正就一句话 ...

  9. 用markdown + html写一封简历

    0. 前言 1. 阶段1 - 确定需要几个模块 2. 阶段2 - 使用纯文字填充简历 3. 阶段3 - 预留空格 4. 阶段4 - 文章垂直方向的调整 5. 阶段5 - 居中对齐 6. 阶段6 - 加 ...

随机推荐

  1. (三)认识twisted reactor

    一.reactor是单线程模型,简单粗暴,也就是说网络IO和我们的业务逻辑一般是在一个线程里,其中网络IO通过event loop的方式去异步执行,效率也很高.看下官网的这幅图,比较清晰 twiste ...

  2. Java——ArrayList底层源码分析

    1.简介 ArrayList 是最常用的 List 实现类,内部是通过数组实现的,它允许对元素进行快速随机访问.数组的缺点是每个元素之间不能有间隔, 当数组大小不满足时需要增加存储能力,就要将已经有数 ...

  3. P1141零一迷宫

    这是一道对于除了我之外其他人都十分简单的搜索题,我终于在这个夜里搞会了. 首先其问可以到达多少个点,并不是走一次可以最多经过几个点,这就解释了为什么不需要回溯,并且递归边界则是让其全部走完即可.于是便 ...

  4. vue-split-table【表格合并和编辑插件】

    前言 vue-split-table应用的效果图 vue-split-table开源地址,欢迎star,现在已经开源和同步到npm上轻松搞定表格拆分或者合并,编辑,再也不怕被产品怼啦 1.核心源码分析 ...

  5. UITextField 文本框 只能输入数字 且保留2位小数 实现

    http://blog.sina.com.cn/s/blog_aa7579f601015xvx.html #pragma mark - #pragma mark UITextField - (BOOL ...

  6. 编程的智慧(王垠)(http://www.cocoachina.com/programmer/20151125/14410.html)

    编程是一件创造性的工作,是一门艺术.精通任何一门艺术,都需要很多的练习和领悟,所以这里提出的“智慧”,并不是号称三天瘦二十斤的减肥药,它并不能代替你自己的勤奋.然而我希望它能给迷惑中的人们指出一些正确 ...

  7. java实现一个简单的计数器

    package com.fengunion.sf; import org.junit.platform.commons.util.StringUtils; import java.util.HashM ...

  8. Mongodb的几条命令

    最近.... #设置用户名密码db.createUser({user: 'root', pwd: '123456', roles: ['root']}) #开启认证nohup mongod --aut ...

  9. JetSonNano darknet yolov3工程通过CMakeLists.txt配置编译环境

    CMakeLists.txt 写的比较糙,有疑问欢迎咨询. option(GPU ON) option(CUDNN ON) option(OPENCV ON) cmake_minimum_requir ...

  10. java伪代码读后感

    愚公,在这位名家身上,浓缩了项目的组织者,团队经理,编程人员,技术分析师等众多角色的优秀素质.原始需求的产生“惩山北之塞,出入之迁”项目沟通的基本方式“聚室而谋之”项目的目标“毕力平险,指通豫南,达于 ...