jsPDF & html2canvas Custom CSS Resume PDF Generator With Image in HTML5 & Javascript Full Project For Beginners

 

 

index.html

 

 

 

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="resume.css" />
    <title>Resume</title>
</head>

<body>
    <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>
</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>
<script>
    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);
</script>

</html>

 

 

resume.css

 

 

: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;
}

 

 

 

 

 

 

 

 

DOWNLOAD FULL SOURCE CODE

 

 

 

Leave a Reply