web-dev-qa-db-fra.com

Comment créer une page imprimable Twitter-Bootstrap

J'utilise Twitter-Bootstrap et je dois pouvoir imprimer la page telle qu'elle est sur le navigateur. Je peux très bien imprimer d'autres pages créées avec Twitter-Bootstrap, mais je n'arrive pas à imprimer ma page qui utilise uniquement Twitter-Bootstrap. Est-ce que je manque un tag quelque part?

Page officielle TB imprimée: Twitter Bootstrap Page

Ma page imprimée: enter image description here

À quoi ressemble réellement ma page: enter image description here

printingtwitter-bootstrap
157
Jay Q.

Assurez-vous d'avoir une feuille de style assignée pour l'impression.
Cela pourrait être une feuille de style séparée:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

ou un que vous partagez pour tous les appareils:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

Ensuite, vous pouvez écrire vos styles pour les imprimantes dans les feuilles de style séparées ou dans la feuille partagée à l’aide de requêtes multimédia:

@media print {
    /* Your styles here */
}
153
albertedevigo

Mise à jour Bootstrap 3.2: (version actuelle)

La version actuelle de Bootstrap stable est 3.2.0 .
Avec la version 3.2 visible-print obsolète, vous devriez utiliser comme suit:

Class                        Browser    Print
 -------------------------------------------------
.visible-print-block         Hidden        Visible (as block)
.visible-print-inline        Hidden        Visible (as inline)
.visible-print-inline-block  Hidden        Visible (as inline-block)
.hidden-print                Visible       Hidden

Mise à jour Bootstrap 3:

Les classes d'impression sont maintenant dans les documents: http://getbootstrap.com/css/#responsive-utilities-print

Similar to the regular responsive classes,
       use these for toggling content for print.

Class            Browser    Print
 ----------------------------------------
.visible-print   Hidden     Visible
.hidden-print    Visible    Hidden

Version Bootstrap 2.3.1:

Après avoir ajouté le fichier bootstrap.css dans votre code HTML,
Trouvez les parties que vous ne voulez pas imprimer et ajoutez la classe hidden-print aux balises . Parce que le fichier css comprend ceci:

@media print {
  .visible-print  { display: inherit !important; }
  .hidden-print   { display: none !important; }
}
177
trante

Remplacer chaque col-md- par col-xs-

par exemple, remplacez chaque col-md-6 par col-xs-6.

Ceci est la chose qui a fonctionné pour moi pour me débarrasser de ce problème, vous pouvez voir ce que vous devez remplacer.

106
Sonam

Il y a une section de code @media print dans le fichier css (Bootstrap 3.3.1 [UPDATE:] à 3.3.5), elle supprime pratiquement tout le style, de sorte que vous obtenez des impressions assez fades, même quand il fonctionne.

Pour le moment, j'ai dû supprimer la section @media print de bootstrap.css - ce dont je suis vraiment pas heureux, mais mes utilisateurs veulent des captures d'écran directes, donc cela devra être fait pour le moment. Si quelqu'un sait comment le supprimer sans modifier les fichiers d'amorçage, je serais très intéressé. 

Voici le bloc de code "fautif", qui commence à la ligne 192:

@media print {
  *,
  *:before,enter code here
  *:after {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}
16
Hugo Yates

La meilleure option que j'ai trouvée était http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/

html2canvas(document.body, {  
  onrendered: function(canvas) {
    $("#page").hide();
    document.body.appendChild(canvas);
    window.print();
    $('canvas').remove();
    $("#page").show();
  }
});
6
Bodie Leonard

Si quelqu'un recherche une solution pour Bootstrap v2.X.X ici. Je quitte la solution que j'utilisais. Ce n'est pas complètement testé sur tous les navigateurs, mais cela pourrait être un bon début.

1) assurez-vous que l'attribut média de bootstrap-responsive.css est screen.

<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />

2) créez un print.css et assurez-vous que son attribut multimédia print

<link href="/css/print.css" rel="stylesheet" media="print" />

3) dans print.css, ajoutez la "largeur" ​​de votre site web en html & body

html, 
body {
    width: 1200px !important;
}

4.) reproduisez les classes de requête multimédia nécessaires dans print.css car elles étaient à l'intérieur de bootstrap-responsive.css et nous l'avons désactivé lors de l'impression.

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}

Voici la version complète de print.css:

html, 
body {
    width: 1200px !important;
}

.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
3
abchau

2 choses FYI -

  1. Pour l'instant, ils ont ajouté quelques classes à bascule. Découvrez ce qui est disponible dans la dernière version stable - print bascule dans responsive-utilities.less
  2. Bootstrap 3.0 est une nouvelle solution améliorée qui ajoute un fichier print.less distinct. Voir print.less séparé
2
rachelslurs

Pour que la vue d'impression ressemble à la tablette ou au bureau, incluez bootstrap comme .less, pas comme .css. Vous pouvez ensuite écraser les classes réactives bootstrap à la fin du fichier bootstrap_variables, par exemple:

@container-sm:      1200px;
@container-md:      1200px;
@container-lg:      1200px;
@screen-sm:         0;

Ne vous inquiétez pas pour mettre ces variables à la fin du fichier. MOINS prend en charge le chargement paresseux des variables afin qu'elles soient appliquées.

0
Hrvoje Golcic

Si vous souhaitez conserver les colonnes sur du papier A4 (environ 540 pixels), c’est une bonne idée.

@media print {
    .make-grid(print-A4);
}

.make-print-A4-column(@columns) {
    @media print {
        float: left;
        width: percentage((@columns / @grid-columns));
    }
}

Vous pouvez l'utiliser comme ceci:

<div class="col-sm-4 col-print-A4-4">

0
Søren Westh Larsen