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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。