我用HTML寫簡歷
本文屬於原創文章，轉載請註明--來自桃源小盼的博客
起因
每次換工作寫簡歷都是有點痛苦的事情，尤其是下載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地址