简历中该怎么写⾃⼰了解html，我⽤HTML写简历
本⽂属于原创⽂章，转载请注明--来⾃桃源⼩盼的博客
起因
每次换⼯作写简历都是有点痛苦的事情，尤其是下载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 = load
// 热更新
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 = wPage()
('localhost:7000')
await page.pdf({
path: 'resume.pdf',
format: 'A4',
// 打印背景⾊
printBackground: true
})
await browser.close()
前端页面模板
console.info('build done')
})()
结语
最后写简历的事情，也被我们⼯程化了，想想也是省⼼省⼒。可以发挥我们的想象，加⼊各种好玩的东西，再也没⼈有跟我⼀样的简历样式了。
这⾥写了⼀个简单的项⽬，仅供参考demo地址

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。