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
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.
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