HTML to PDF CV Maker

David Yappeter
2 min readJul 7, 2022

--

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.

--

--