我用HTML写简历

时间 2019-11-05

标签 html 简历栏目 HTML 繁體版

原文原文链接

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

原由

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

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

Puppeteer

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

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

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

install

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

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

index.html

具体怎么写得养眼，就是本身的事情了，这里提供一个简单的模板。npm

<!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地址，因此还须要静态资源服务gulp

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