HTML to PDF CV Maker

Usually, when you are creating your CV on a CV Maker Website, it will allow you to fill in the information, but after the preview, you will be required to make a payment to download the file. So instead of paying, Let’s try to create our own CV in HTML, it is easy to customize and decorate with CSS.

Requirements

• Basics of HTML and CSS.
• Nodejs (PDF Generator)
• gulp (optional)

Repositories: https://github.com/david-yappeter/cv

Get Started

We will design our CV in index.html file and style it with style.css .

index.html

style.css

The output of the file if you access the index.html will look like this: https://david-yappeter.github.io/CV/

Minify with gulp (optional)

With gulp , we can minify our index.html and style.css easily with one command.

Library list:

• gulp
• gulp-autoprefixer
• gulp-csso
• gulp-htmlmin
• del

After installing these libraries, we will create gulpfile.js on root directory as gulp configuration file.

gulpfile.js

clean => will delete the file generated by gulp before.

styles => will generate a minified version of style.css into dist folder

pages => will generate minified version of index.html into dist folder

For the autoprefixer browser support, you will need to include browserslist on your package.json , and add gulp pipeline command.

example:

{
    "name": "packagejson"
    "scripts: {
        "gulp-clean": "gulp clean",
        "gulp-page": "gulp pages",
        "gulp-style": "gulp styles"
    }
    ......
    "browserslist": [
        "ie >= 10",
        "ie_mob >= 10",
        "ff >= 30",
        "chrome >= 34",
        "safari >= 7",
        "opera >= 23",
        "ios >= 7",
        "android >= 4.4",
        "bb >= 10"
    ]
}

npm run gulp-clean , npm run gulp-page , npm run gulp-style and see the result of the minified files.

HTML to PDF Generator

We will use some libraries to generate the PDF:

• ejs
• express
• html-pdf-node

html-pdf-node will capture the screen that is served by express and convert it into a PDF.

pdf-gen.js

node ./pdf-gen.js to run the code, and my-cv.pdf will pop out on the root directory.

You can customize the Paper size (width, height) or the format , output (path) folder.

This is my package.json full command config:

PDF Result:

If you have questions, please, ask in the comments.