Build a CV or Resume Generator pdf Flask Python With Source Code (Step-by-Step with YouTube Video)

Updated by Ashirafu Kibalama on June 30, 2024

(Step-by-Step with YouTube Video) - 5 Steps To Make CV or Resume Generator PDF with Flask in Python

A strong CV or resume is crucial in today's job market. However, manually creating these documents can be time-consuming and prone to errors.

This blog guides you through building a CV or resume generator using Flask, a popular Python web framework, to create PDF outputs.

We also provide a step-by-step YouTube tutorial. Flask's lightweight nature makes it ideal for developing web applications quickly.

By combining Flask with PDF generation libraries like pdfkit, we can build a tool that allows users to input their details and automatically generate a professionally formatted PDF.

Whether you're a developer or need to create multiple resumes efficiently, this project is a great way to explore Python's capabilities.

Follow our blog and YouTube video to build your CV or resume generator with Flask Python. Let's get started!

Watch my YouTube video to build your CV or resume generator with Flask Python

Step 1) Install wkhtmltopdf:

On Windows:

Download and Install wkhtmltopdf on your Windows machine. Click the blog for more information.

On macOS:

Install using Homebrew:



    brew install wkhtmltopdf

Step 2) Verify wkhtmltopdf Installation (Optional):

Click the blog for information.

Step 3) Pip installs the requirements.txt.

On Windows:
python -m pip install -r requirements.txt

On MacOS:
pip3 install -r requirements.txt

# requirements.txt

Flask==2.3.2
Flask-WTF==1.2.1
pdfkit==1.0.0
WTForms==3.0.1

Step 4) Create the main.py and forms.py files:

Here we use:

BytesIO:

A class from the io module handles byte streams, allowing the creation of in-memory binary streams.

pdfkit:

A library to generate PDFs from HTML.

#main.py

from io import BytesIO

from flask import Flask, render_template, send_file
import pdfkit

from forms import ResumeForm

app = Flask(__name__)
app.config['SECRET_KEY'] = '12346vb456677fsv567787bd67bn'


@app.route('/', methods=['GET', 'POST'])
def index():
    form = ResumeForm()
    if form.validate_on_submit():
        # generating the pdf template
        rendered_cv = render_template('cv_template.html', form=form, )

        options = {
            'page-size': 'Letter',
            'encoding': 'UTF-8',
        }

        # wkhtmltopdf path configurations
        # C:\wkhtmltox\bin is the path and add /wkhtmltopdf.exe
        config = pdfkit.configuration(wkhtmltopdf=r'C:\wkhtmltox\bin/wkhtmltopdf.exe') # Update this path accordingly
        pdf = pdfkit.from_string(rendered_cv, False,
                                 options=options, configuration=config, )

        # Convert the bytes object to a file-like object
        pdf_file = BytesIO(pdf)

        renponse = send_file(pdf_file, as_attachment=False,
                             download_name='my_cv/resume.pdf',
                             mimetype='application/pdf')
        return renponse

    return render_template('index.html', form=form, )


if __name__ == '__main__':
    app.run(debug=True)

#forms.py

from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired


class ResumeForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    email = StringField('Email', validators=[DataRequired()])
    phone = StringField('Phone', validators=[DataRequired()])
    address = TextAreaField('Address', validators=[DataRequired()])
    education = TextAreaField('Education', validators=[DataRequired()])
    experience = TextAreaField('Experience', validators=[DataRequired()])
    skills = TextAreaField('Skills', validators=[DataRequired()])
    submit = SubmitField('Generate Cv/Resume')

Step 5) Create the index.html and cv_template.html files:

#index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <title>Title</title>

    <style>
        body {
        background-color: #7E8EF1;
        }

    </style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-2">

            <div class="offset-2">
                <h1>Cv/Resume Generator</h1>
            </div>

            <form method="POST" class="mt-5">
                {{ form.hidden_tag() }}

                <p>
                    {{ form.name.label }} <br>
                    {{ form.name(class='form-control') }}
                </p>
                <p>
                    {{ form.email.label }} <br>
                    {{ form.email(class='form-control') }}
                </p>
                <p>
                    {{ form.phone.label }} <br>
                    {{ form.phone(class='form-control') }}
                </p>
                <p>
                    {{ form.address.label }} <br>
                    {{ form.address(class='form-control', cols=32, rows=4) }}
                </p>
                <p>
                    {{ form.education.label }} <br>
                    {{ form.education(class='form-control', cols=32, rows=4) }}
                </p>
                <p>
                    {{ form.experience.label }} <br>
                    {{ form.experience(class='form-control', cols=32, rows=4) }}
                </p>
                <p>
                    {{ form.skills.label }} <br>
                    {{ form.skills(class='form-control', cols=32, rows=4) }}
                </p>
                <p>
                    {{ form.submit(class='btn btn-primary') }}
                </p>

            </form>
        </div>
    </div>
</div>
</body>
</html>

#cv_template.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CV Template</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background: #4B70F5;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .header, .section {
            margin-bottom: 20px;
        }
        .header h1 {
            margin: 0;
            padding: 0;
            font-size: 2.5em;
            color: #333;
        }
        .header p {
            font-size: 1.2em;
            color: #777;
        }
        .section h2 {
            font-size: 2em;
            color: #333;
            border-bottom: 2px solid #333;
            padding-bottom: 5px;
        }
        .section ul {
            list-style-type: none;
            padding: 0;
        }
        .section ul li {
            margin: 10px 0;
        }
        .section ul li h3 {
            margin: 0;
            padding: 0;
            font-size: 1.5em;
            color: #333;
        }
        .section ul li p {
            margin: 5px 0;
            color: #777;
        }
        .contact {
            text-align: right;
        }
        .contact p {
            margin: 5px 0;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="header">
            <h1>{{ form.name.data }}</h1>

            <div class="contact">
                <p>Email: {{ form.email.data }}</p>
                <p>Phone: {{ form.phone.data }}</p>
                <p>Address: {{ form.address.data }}</p>

            </div>
        </div>


        <div class="section">
            <h2>Experience</h2>
            <ul>
                <li>
                   {{ form.experience.data }}
                </li>
            </ul>
        </div>

        <div class="section">
            <h2>Education</h2>
            <ul>
                <li>
                    {{ form.education.data }}
                </li>

            </ul>
        </div>

        <div class="section">
            <h2>Skills</h2>
            <ul>
                <li>{{ form.skills.data }}</li>

            </ul>
        </div>


    </div>
</body>
</html>

Conclusion:

Creating a CV or resume generator using Flask and Python is an excellent project for enhancing your web development skills.

Throughout this guide, we've walked you through the step-by-step process of setting up your development environment, designing the application, and implementing the backend logic.

By following the accompanying YouTube video, you can visually grasp each step.

This project demonstrates the power and flexibility of Flask as a web framework and shows how Python can efficiently handle complex data manipulation tasks.

We hope this tutorial sparked your interest in further exploring web development with Flask and Python.

Feel free to modify and expand upon this project to make it even more helpful.

Happy coding!

2 2 Ways To Check If wkhtmltopdf is Installed and What wkhtmltopdf Version?

3 8 Key Pycharm Configuration Settings || June 09, 2024 \\ Last Update: June 09, 2024

Subscribe to our YouTube channel:

Free Python Source Code