IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Générer un pdf à partir d'une div bootstrap


Sujet :

Framework CSS Bootstrap

  1. #1
    Membre actif
    Inscrit en
    Juin 2005
    Messages
    578
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 578
    Points : 240
    Points
    240
    Par défaut Générer un pdf à partir d'une div bootstrap
    Bonjour

    Je voudrais générer un fichier pdf à partir d'une div utilisant bootstrap. J'ai pu trouver ce lien qui propose l'utilisation de la bibliothèque Print.js:

    https://jsfiddle.net/crabbly/rj397t4v/

    Voici donc ce que j'ai sur ma page html:

    Nom : Capture.PNG
Affichages : 1596
Taille : 20,0 Ko

    Le problème est que quand je génère le pdf, la couleur verte du background ne s'affiche pas:

    Nom : Capture1.PNG
Affichages : 1476
Taille : 130,6 Ko

    On dirait que le style css de bootstrap n'est pas pris en compte.

    Comment y remédier ?

    Voici la page index.html:

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <title>jsPDF</title>
    	<meta charset="utf-8">
     
      <link rel="stylesheet" href="print/print.min.css">
      <link rel="stylesheet" href="css/style.css">
      <link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' /><!-- bootstrap css -->
    </head>
     
    <body>
     
     <div id="printElement">
      <h1>Bootstrap Grid</h1>
     
      <div class="row bg-success">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
      </div>
     
      <div class="row">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
      </div>
     
      <div class="row">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
      </div>
    </div>
    <div>
      <button class="btn btn-primary" id="printButton">
        Print
      </button>
    </div>
     
     
     
    	<script type="application/javascript" src="js/jquery-3.2.1.min.js"></script>
    	<script type="application/javascript" src="print/print.min.js"></script>
    	<script src="js/bootstrap.min.js"></script>
    	<script>
            function print() {
            printJS({
        printable: 'printElement',
        type: 'html',
        targetStyles: ['*']
     })
    }
     
    document.getElementById('printButton').addEventListener ("click", print)
            </script>
     
    </body>
     
    </html>

    Voici le style.css:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #printElement, #printButton {
      margin: 30px;
    }
    .col-sm-4 {
      padding: 10px;
      border: 1px solid grey;
    }
    Merci

  2. #2
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 739
    Points
    4 739
    Par défaut
    faut juste récuperer les attributs css qui t'ntéressent et les ajouter dans print/print.min.css
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  3. #3
    Membre actif
    Inscrit en
    Juin 2005
    Messages
    578
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 578
    Points : 240
    Points
    240
    Par défaut
    Bon ça ne marche toujours pas.

    j'ai rajouté l'attribut nommé maligne:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     <div class="row maligne">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
      </div>

    Et je lui ai donné la couleur verte dans print.min.css:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .maligne {
    	background-color:green;
    }
    La ligne apparait bien avec la couleur verte, mais pas sur le pdf.

  4. #4
    Membre actif
    Inscrit en
    Juin 2005
    Messages
    578
    Détails du profil
    Informations forums :
    Inscription : Juin 2005
    Messages : 578
    Points : 240
    Points
    240
    Par défaut
    Finalement ça marche, le problème venait de mon navigateur (firefox); il fallait juste aller à "Imprimer" - " Mise en page" et cocher la case "Imprimer le fond de page ( couleurs et images )" .

    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Vxi3] générer des pdf à partir d'une boucle
    Par milkaaa dans le forum Webi
    Réponses: 4
    Dernier message: 09/04/2013, 19h07
  2. [PDF] Générer un PDF à partir d'une page PHP
    Par Finnegans dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 03/12/2009, 11h19
  3. [FPDF] Générer un pdf à partir d'une base MySQL
    Par sjcbboy dans le forum Bibliothèques et frameworks
    Réponses: 4
    Dernier message: 27/06/2008, 11h36
  4. [phpToPDF] Générer un pdf à partir d'une page dynamique php
    Par MayaNeo dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 05/06/2007, 21h33
  5. Générer un PDF à partir d'une page ASP
    Par Poussy-Puce dans le forum ASP
    Réponses: 1
    Dernier message: 30/03/2006, 18h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo