This article belongs to the original article, reprint please note — fromTao Yuan xiao Pan’s blog

The cause of

Every time I change my job, writing my resume is a bit painful, especially downloading Word template, various registration procedures, and some of them have to buy points, rushing members, which is very uncomfortable. Even if the download is good, modify some of the details are not familiar with various functions, due to the long-term use of Word, many Settings have been left behind.

One day, I was inspired by this simple template style, which, for a front-end engineer, could write a page in minutes, as long as I could convert HTML to PDF.

Puppeteer

Puppeteer is a Headless automation tool from Google.

  • Use web pages to generate PDF and pictures
  • Crawl web content
  • Automated form submission, UI testing, keyboard entry, and more
  • Create an up-to-date automated test environment

For converting HTML to PDF, it’s a bit overkill, but it works, and the rendering is safe enough.

install

# > Node v6.4.0
npm i puppeteer --save
Copy the code

But there is a pit installed here, fortunately, predecessors stepped on the pit, failed to click here, I also failed to download ~~~

index.html

Specific how to write eye candy, it is their own thing, here to provide a simple template.


      
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>My resume</title>
    <meta name="viewport" content="Width = device - width, initial - scale = 1, minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0">
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div class="content">The main content</div>
</body>
</html>
Copy the code

gulpfile.js

Since want to write cool, how also need a hot update, make a simple automation tool. Puppeteer can only access HTTP addresses, so static resource services are required

npm i --save browser-sync gulp gulp-notify
Copy the code
  • Browser-sync provides static servers and hot updates
  • Gulp automation tool
const gulp = require('gulp')
const notify = require('gulp-notify')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload

/ / hot update
gulp.task('styles'.function () {
    return gulp.src('src/*.css')
        .pipe(reload({stream: true}))
        .pipe(notify({message: 'Styles complete'}})));// Static resource services
gulp.task('serve'['styles'].function () {
    browserSync.init({
        server: {
            baseDir: "./src"
        },
        port: 7000.// Turn off notifications in the upper right corner
        notify: false
    })

    gulp.watch('src/**/*.css'['styles'])
    gulp.watch('src/**/*.html', reload)
})
Copy the code

build.js

The only thing that needs to happen is that the transformation is generated, so we use await syntax, otherwise the hierarchy is too deep.

(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'.// Print the background color
        printBackground: true
    })

    await browser.close()
    console.info('build done')
})()
Copy the code

conclusion

Finally, writing a resume, we have also been engineering, think about it is also save worry and effort. We can use our imagination and add all kinds of fun things, and no one will ever have a resume like mine.

A simple project is written here for reference only at the demo address