本文屬于原創(chuàng)文章，轉(zhuǎn)載請注明--來自桃源小盼的博客

起因

每次換工作寫簡歷都是有點痛苦的事情，尤其是下載word模板，各種注冊流程，有的還得買積分，沖會員，甚是不爽。就算下載好了，修改其中的一些細(xì)節(jié)也不太熟悉各種功能，由于長期不用word，早把很多設(shè)置功能拋之腦后。

忽然有一天靈感涌上，這種簡易的模板樣式，對于一個前端工程師來說，寫個頁面分分鐘的事，只要能把html轉(zhuǎn)成pdf格式這事就成了。

Puppeteer

Puppeteer是谷歌出的一個headless自動化工具。

利用網(wǎng)頁生成PDF、圖片

抓取網(wǎng)站內(nèi)容

自動化表單提交、UI測試、鍵盤輸入等

創(chuàng)建一個最新的自動化測試環(huán)境

用來把html轉(zhuǎn)換pdf，雖然是有點大材小用，但是很適合，渲染效果也是足夠放心的。

install

# > Node v6.4.0

npm i puppeteer --save

但是安裝這里有坑位，還好前人踩過坑了，失敗的人點這里，筆者也是下載失敗了~~~

index.html

具體怎么寫得養(yǎng)眼，就是自己的事情了，這里提供一個簡單的模板。

我的簡歷

主要內(nèi)容

gulpfile.js

既然想要寫得爽，怎么也得來個熱更新吧，搞個簡單的自動化工具。

Puppeteer只能訪問http地址，所以還需要靜態(tài)資源服務(wù)

npm i --save browser-sync gulp gulp-notify

browser-sync 提供靜態(tài)服務(wù)器和熱更新

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'}))

});

// 靜態(tài)資源服務(wù)

gulp.task('serve', ['styles'], function () {

browserSync.init({

server: {

baseDir: "./src"

},

port: 7000,

// 關(guān)閉右上角通知

notify: false

})

gulp.watch('src/**/*.css', ['styles'])

gulp.watch('src/**/*.html', reload)

})

build.js

只差轉(zhuǎn)換生成了，這里用到了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')

})()

結(jié)語

最后寫簡歷的事情，也被我們工程化了，想想也是省心省力。可以發(fā)揮我們的想象，加入各種好玩的東西，再也沒人有跟我一樣的簡歷樣式了。

這里寫了一個簡單的項目，僅供參考demo地址

總結(jié)

以上是生活随笔為你收集整理的简历中该怎么写自己了解html,我用HTML写简历的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。