Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on December 16, 2022

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>

 

 

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.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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>
        <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>

 

 

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

 

 

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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.

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
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

 

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme