jsPDF & html2canvas Custom CSS Resume PDF Generator With Image in HTML5 & Javascript

Welcome folks today in this blog post we will be building a custom resume in html5 and javascript using jspdf and html2canvas library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started yo need to make a index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

As you can see we are including the jspdf and html2canvas library cdn.

Now we need to add the basic html required for the resume and we will also be having the image inside the resume as shown below.

<main>
        <header>
            <h1>Développeur/Intégrateur WEB Junior</h1>
        </header>
        <div class="identity-experiences-skills">
            <aside>
                <div>
                    <img src="photo-identite.jpg" />
                    <article>
                        <div><strong>Elliot RICHARD</strong></div>
                        <address>89, rue Myrha <br />75018 PARIS</address>28 ans <br />Permis B
                    </article>
                </div>
                <article>
                    <h2>Langues</h2>
                    <h3>Français</h3> Langue maternelle
                    <h3>Anglais</h3> Niveau professionnelle
                    <h3>Allemand et Italien</h3> Conversation courante
                </article>
                <article>
                    <div><strong>06.08.14.23.98</strong></div>
                    <div><strong>elliot.r@free.fr</strong></div>
                </article>
            </aside>
            <section>
                <article>
                    <div class="experiences">
                        <header>
                            <h2>ETUDES & FORMATION</h2>
                        </header>
                        <div class="experience-wrapper">
                            <div class="experience-duration">2019-2020</div>
                            <div class="experience-description">
                                <h3>Licence professionnelle Programmation Internet et Systèmes Mobiles</h3>
                                en alternance avec l’IUT d’Orsay et le laboratoire Irène Juliot-Curie.
                            </div>
                        </div>
                        <div class="experience-wrapper">
                            <div class="experience-duration">2018-2019</div>
                            <div class="experience-description">
                                <h3>DUT Informatique en 1 an</h3>
                                IUT d’Orsay, Université Paris Saclay.
                            </div>
                        </div>
                        <div class="experience-wrapper">
                            <div class="experience-duration">2016-2017</div>
                            <div class="experience-description">
                                <h3>Master 1, métiers de l’enseignement</h3>
                                École supérieure des professeurs des Écoles, Perpignan.
                            </div>
                        </div>
                        <div class="experience-wrapper">
                            <div class="experience-duration">2013-2016</div>
                            <div class="experience-description">
                                <h3>Licence Sciences de la Terre</h3>
                                Université de Rennes 1.
                            </div>
                        </div>
                        <div class="experience-wrapper">
                            <div class="experience-duration">2016</div>
                            <div class="experience-description">
                                <h3>BAFA (Brevet d’Aptitude Aux Fonctions d’Animateur)</h3>
                                Qualification : Surveillant de baignade.
                            </div>
                        </div>
                    </div>
                </article>
                <article>
                    <header>
                        <h2>PROJET UNIVERSITAIRE</h2>
                    </header>
                    <div>
                        <h3>CodingPool<span>(alternance)</span></h3>
                        <p>Flask ,Vue.js, AJAX, SQLAlchemy, Git, Docker, Jest, GitLab CI</p>
                        <p>Développement d’une application selon un cahier des charges prédéfini.
                            Création de services Web sous forme de modules réutilisables (authentification, tri).
                            Maintenance, amélioration et ajout de nouvelles fonctionnalités.
                            Mise en place de tests unitaires.
                        </p>
                        <h3>CodingPool<span>(alternance)</span></h3>
                        <p>Flask ,Vue.js, AJAX, SQLAlchemy, Git, Docker, Jest, GitLab CI</p>
                        <p>Développement d’une application selon un cahier des charges prédéfini.
                            Création de services Web sous forme de modules réutilisables (authentification, tri).
                            Maintenance, amélioration et ajout de nouvelles fonctionnalités.
                            Mise en place de tests unitaires.
                        </p>
                        <h3>CodingPool<span>(alternance)</span></h3>
                        <p>Flask ,Vue.js, AJAX, SQLAlchemy, Git, Docker, Jest, GitLab CI</p>
                        <p>Développement d’une application selon un cahier des charges prédéfini.
                            Création de services Web sous forme de modules réutilisables (authentification, tri).
                            Maintenance, amélioration et ajout de nouvelles fonctionnalités.
                            Mise en place de tests unitaires.
                        </p>
                    </div>
                </article>
                <article>
                    <div class="experiences">
                        <header>
                            <h2>EXPÉRIENCE PROFESSIONNELLE</h2>
                        </header>
                        <div class="experience-wrapper">
                            <div class="experience-duration">2019-2020</div>
                            <div class="experience-description">
                                <h3>Laboratoire Irène Juliot-Curie</h3>
                                Développeur/Intégrateur WEB fullstack Flask-Vue.js<br>
                                Refactoring de l’application CodingPool.
                            </div>
                        </div>
                        <div class="experience-wrapper">
                            <div class="experience-duration">Été<br>2015-2018</div>
                            <div class="experience-description">
                                <h3>Mairie de Paris</h3>
                                Animateur et surveillant de baignade
                            </div>
                        </div>
                        <div class="experience-wrapper">
                            <div class="experience-duration">mars-juin<br>2018</div>
                            <div class="experience-description">
                                <h3>Acadomia<span>, Paris</span></h3>
                                Cours particuliers de mathématiques et français à des collégiens
                            </div>
                        </div>
                        <div class="experience-wrapper">
                            <div class="experience-duration">Sept. 2017<br>-<br>Fév. 2018</div>
                            <div class="experience-description">
                                <h3>Garfish Kirribilli<span>, Sydney (Australie)</span></h3>
                                Serveur<br>
                                Accueil client, marketing, environnement 100 % anglophone
                            </div>
                        </div>
                    </div>
                </article>
                <article>
                    <header>
                        <h2>CENTRES D'INTERÊTS</h2>
                    </header>
                    <div class="hobbies">
                        <div>
                            <h3>Sport</h3>
                            <ul>
                                <li>Course à pied</li>
                                <li>Natation</li>
                            </ul>
                        </div>
                        <div>
                            <h3>Bénévolat</h3>
                            <ul>
                                <li>Aide aux devoirs</li>
                                <li>Soupe populaire</li>
                            </ul>
                        </div>
                    </div>
                </article>
            </section>
        </div>
    </main>
    <button>click</button>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

<main>

<h1>Développeur/Intégrateur WEB Junior</h1>

</header>

<aside>

<div>

<div><strong>Elliot RICHARD</strong></div>

<address>89, rue Myrha <br />75018 PARIS</address>28 ans <br />Permis B

</article>

</div>

<h2>Langues</h2>

<h3>Français</h3> Langue maternelle

<h3>Anglais</h3> Niveau professionnelle

<h3>Allemand et Italien</h3> Conversation courante

</article>

<div><strong>elliot.r@free.fr</strong></div>

</article>

</aside>

<h2>ETUDES & FORMATION</h2>

</header>

<h3>Licence professionnelle Programmation Internet et Systèmes Mobiles</h3>

en alternance avec l’IUT d’Orsay et le laboratoire Irène Juliot-Curie.

</div>

<h3>DUT Informatique en 1 an</h3>

IUT d’Orsay, Université Paris Saclay.

</div>

<h3>Master 1, métiers de l’enseignement</h3>

École supérieure des professeurs des Écoles, Perpignan.

</div>

<h3>Licence Sciences de la Terre</h3>

Université de Rennes 1.

</div>

<h3>BAFA (Brevet d’Aptitude Aux Fonctions d’Animateur)</h3>

Qualification : Surveillant de baignade.

</div>

</article>

<h2>PROJET UNIVERSITAIRE</h2>

</header>

<div>

<h3>CodingPool<span>(alternance)</span></h3>

<p>Flask ,Vue.js, AJAX, SQLAlchemy, Git, Docker, Jest, GitLab CI</p>

<p>Développement d’une application selon un cahier des charges prédéfini.

Création de services Web sous forme de modules réutilisables (authentification, tri).

Maintenance, amélioration et ajout de nouvelles fonctionnalités.

Mise en place de tests unitaires.

</p>

<h3>CodingPool<span>(alternance)</span></h3>

<p>Flask ,Vue.js, AJAX, SQLAlchemy, Git, Docker, Jest, GitLab CI</p>

<p>Développement d’une application selon un cahier des charges prédéfini.

Création de services Web sous forme de modules réutilisables (authentification, tri).

Maintenance, amélioration et ajout de nouvelles fonctionnalités.

Mise en place de tests unitaires.

</p>

<h3>CodingPool<span>(alternance)</span></h3>

<p>Flask ,Vue.js, AJAX, SQLAlchemy, Git, Docker, Jest, GitLab CI</p>

<p>Développement d’une application selon un cahier des charges prédéfini.

Création de services Web sous forme de modules réutilisables (authentification, tri).

Maintenance, amélioration et ajout de nouvelles fonctionnalités.

Mise en place de tests unitaires.

</p>

</div>

</article>

<h2>EXPÉRIENCE PROFESSIONNELLE</h2>

</header>

<h3>Laboratoire Irène Juliot-Curie</h3>

Développeur/Intégrateur WEB fullstack Flask-Vue.js<br>

Refactoring de l’application CodingPool.

</div>

<h3>Mairie de Paris</h3>

Animateur et surveillant de baignade

</div>

<h3>Acadomia<span>, Paris</span></h3>

Cours particuliers de mathématiques et français à des collégiens

</div>

<h3>Garfish Kirribilli<span>, Sydney (Australie)</span></h3>

Serveur<br>

Accueil client, marketing, environnement 100 % anglophone

</div>

</article>

<h2>CENTRES D'INTERÊTS</h2>

</header>

<div>

<h3>Sport</h3>

<ul>

<li>Course à pied</li>

<li>Natation</li>

</ul>

</div>

<div>

<h3>Bénévolat</h3>

<ul>

<li>Aide aux devoirs</li>

<li>Soupe populaire</li>

</ul>

</div>

</article>

</section>

</div>

</main>

<button>click</button>

As you can see we are having the basic resume template which contains various headings and paragraphs and we are also loading the image of the person in the resume. You can replace with your own image. Now we need to also apply some custom css to this resume so that it looks good

And now we need to write the css code

:root {
  font-size: 14px;
}

/* FOND GRIS */

body {
  background-color: rgb(216, 216, 216);
  line-height: 1.5;
  margin: 10px auto;
  max-width: 1200px;
}

/* FEUILLE A4 */

main {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.5in;
  width: 8.5in;
  height: 11in;
  background-color: white;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.7);
  font-family: 'Times New Roman', Times, serif;
  color: hsl(0, 0%, 20%);
}

/* TITLE */

main > header {
    display: flex;
    justify-content: center;
}

header h1 {
  margin: 0;
}

h1 {
  font-size: 1.5rem;
}

/* RESUME CONTENT */

.identity-experiences-skills {
  display: flex;
}

/* IDENTITY-CONTACT-SOFT-SKILLS */

aside {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

img {
  max-width: 100%;
}

/* EXPERIENCES */

section {
  flex: 3;
  margin-left: 10px;
}

article header {
  border-bottom: 2px solid black;
}

.experience-wrapper {
  display: flex;
}

.experience-duration {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 80px; /*à redimensionner selon les besoins*/
}

.experience-description {
  flex: 1; /*pourquoi ? */
}

.experience-description h3 {
  margin: 0;
}

/* HOBBIES */

.hobbies {
  display: flex;
  justify-content: space-between;
}

ul {
  list-style: none;
  margin: 0;
}

/* ALL */

h2 {
  font-size: 1rem;
}

article h2, h3, p{
  margin: 0;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

:root {

font-size: 14px;

}

/* FOND GRIS */

body {

background-color: rgb(216, 216, 216);

line-height: 1.5;

margin: 10px auto;

max-width: 1200px;

}

/* FEUILLE A4 */

main {

margin: 0 auto;

box-sizing: border-box;

padding: 0.5in;

width: 8.5in;

height: 11in;

background-color: white;

box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.7);

font-family: 'Times New Roman', Times, serif;

color: hsl(0, 0%, 20%);

}

/* TITLE */

main > header {

display: flex;

justify-content: center;

}

header h1 {

margin: 0;

}

h1 {

font-size: 1.5rem;

}

/* RESUME CONTENT */

.identity-experiences-skills {

display: flex;

}

/* IDENTITY-CONTACT-SOFT-SKILLS */

aside {

flex: 1;

display: flex;

flex-direction: column;

justify-content: space-between;

}

img {

max-width: 100%;

}

/* EXPERIENCES */

section {

flex: 3;

margin-left: 10px;

}

article header {

border-bottom: 2px solid black;

}

.experience-wrapper {

display: flex;

}

.experience-duration {

display: flex;

justify-content: center;

text-align: center;

width: 80px; /*à redimensionner selon les besoins*/

}

.experience-description {

flex: 1; /*pourquoi ? */

}

.experience-description h3 {

margin: 0;

}

/* HOBBIES */

.hobbies {

display: flex;

justify-content: space-between;

}

ul {

list-style: none;

margin: 0;

}

/* ALL */

h2 {

font-size: 1rem;

}

article h2, h3, p{

margin: 0;

}

And now we will be writing the javascript code to use jspdf library to export this resume template to pdf document as shown below.

 const main = document.querySelector("main");
    const button = document.querySelector("button");

    function createPDF() {
        var pdf = new jsPDF('p', 'pt', 'a4');
        pdf.addHTML(main, function () {
            pdf.save('web.pdf');
        });
    }

    button.addEventListener("click", createPDF);

const main = document.querySelector("main");

const button = document.querySelector("button");

function createPDF() {

var pdf = new jsPDF('p', 'pt', 'a4');

pdf.addHTML(main, function () {

pdf.save('web.pdf');

});

}

button.addEventListener("click", createPDF);

As you can see we are using the addHTML() of jspdf to basically add all the html of the resume template with css styles to export them to pdf document