Come creare una pagina Twitter Bootstrap stampabile

Sto usando Twitter-Bootstrap e devo essere in grado di stampare la pagina come appare sul browser. Sono in grado di stampare bene altre pagine realizzate con Twitter-Bootstrap ma non riesco a stampare la mia pagina che utilizza puramente Twitter-Bootstrap. Mi sto perdendo un tag da qualche parte?

Pagina TB ufficiale quando stampata:

La mia pagina quando viene stampata:

Come appare la mia pagina:

Assicurati di avere un foglio di stile assegnato per la stampa.
Potrebbe essere un foglio di stile separato:

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

o uno che condividi per tutti i dispositivi:

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

Quindi, puoi scrivere i tuoi stili per le stampanti nei fogli di stile separati o in quelli condivisi usando le query multimediali:

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

Aggiornamento Bootstrap 3.2: (versione corrente)

La versione attuale di Bootstrap è 3.2.0 .
Con la versione 3.2 visibile-print deprecata, quindi dovresti usare così:

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

Aggiornamento Bootstrap 3:

Le lezioni di stampa sono ora nei documenti: 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

Versione Bootstrap 2.3.1:

Dopo aver aggiunto il file bootstrap.css nel tuo HTML,
trova le parti che non vuoi stampare e aggiungi hidden-printclasse ai tag. Perché il file css include questo:

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

Sostituisci ogni col-md-concol-xs-

ad es .: sostituire ogni col-md-6a col-xs-6.

Questa è la cosa che ha funzionato per me per sbarazzarmi di questo problema, puoi vedere cosa devi sostituire.

C'è una sezione di @media printcodice nel file css (Bootstrap da 3.3.1 [AGGIORNAMENTO:] a 3.3.5), che rimuove praticamente tutto lo stile, in modo da ottenere stampe abbastanza blande anche quando funziona.

Per ora ho dovuto ricorrere a nudo la @media printsezione dalla bootstrap.css - che sono davvero , non contento, ma i miei utenti vogliono screen-palio diretti quindi questo dovrà fare per ora. Se qualcuno sa come eliminarlo senza modifiche ai file bootstrap, sarei molto interessato.

Ecco il blocco di codice "offensivo", inizia alla riga 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;
  }
}

La migliore opzione che ho trovato è stata 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();
  }
});

Nel caso in cui qualcuno stia cercando una soluzione per Bootstrap v2.XX qui. Lascio la soluzione che stavo usando. Questo non è completamente testato su tutti i browser, tuttavia potrebbe essere un buon inizio.

1) assicurarsi che l'attributo media di bootstrap-responsive.csssia screen.

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

2) crea a print.csse assicurati che il suo attributo mediaprint

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

3) all'interno print.css, aggiungi la "larghezza" del tuo sito Web in HTML e body

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

4.) riprodurre le classi di media query necessarie print.cssperché erano all'interno bootstrap-responsive.csse le abbiamo disabilitate durante la stampa.

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

Ecco la versione completa di 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}

2 cose FYI -

1. Per ora, hanno aggiunto alcune classi di attivazione / disattivazione. Scopri cosa è disponibile nell'ultima versione stabile: stampa attiva / disattiva in responsive-utilities.less
2. Soluzione nuova e migliorata disponibile in Bootstrap 3.0: stanno aggiungendo un file print.less separato. Vedi print.less separato

Per fare in modo che la vista di stampa assomigli a tablet o desktop includi bootstrap come .less, non come .css e quindi puoi sovrascrivere le classi responsive bootstrap alla fine del file bootstrap_variables, ad esempio in questo modo:

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

Non preoccuparti di inserire queste variabili alla fine del file. LESS supporta il caricamento lento delle variabili in modo che vengano applicate.

Se vuoi mantenere le colonne sulla stampa A4 (che è di circa 540 px) questa è una buona idea

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

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

Puoi usarlo in questo modo:

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