本文属于原创文章,转载请注明–来自桃源小盼聊技术
起因
每次换工作写简历都是有点痛苦的事情,尤其是下载word模板,各种注册流程,有的还得买积分,冲会员,甚是不爽。就算下载好了,修改其中的一些细节也不太熟悉各种功能,由于长期不用word,早把很多设置功能抛之脑后。
忽然有一天灵感涌上,这种简易的模板样式,对于一个前端工程师来说,写个页面分分钟的事,只要能把html转成pdf格式这事就成了。
Puppeteer
Puppeteer是谷歌出的一个headless自动化工具。
- 利用网页生成PDF、图片
- 抓取网站内容
- 自动化表单提交、UI测试、键盘输入等
- 创建一个最新的自动化测试环境
用来把html转换pdf,虽然是有点大材小用,但是很适合,渲染效果也是足够放心的。
install
1 2
| # > Node v6.4.0 npm i puppeteer --save
|
但是安装这里有坑位,还好前人踩过坑了,失败的人点这里,笔者也是下载失败了~~~
index.html
具体怎么写得养眼,就是自己的事情了,这里提供一个简单的模板。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <!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地址,所以还需要静态资源服务
1
| npm i --save browser-sync gulp gulp-notify
|
- browser-sync 提供静态服务器和热更新
- gulp 自动化工具
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| 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语法,否则层级太深。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| (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地址