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

起因

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

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

Puppeteer

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

利用网页生成PDF、图片

抓取网站内容

自动化表单提交、UI测试、键盘输入等

创建一个最新的自动化测试环境

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

install

# > Node v6.4.0

npm i puppeteer --save

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

index.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地址