Domanda 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 le altre pagine create con Twitter-Bootstrap, ma non riesco a stampare la mia pagina che usa puramente Twitter-Bootstrap. Mi manca un tag da qualche parte?

Pagina TB ufficiale stampata: Twitter Bootstrap Page

La mia pagina stampata: enter image description here

Come appare realmente la mia pagina: enter image description here


152
2017-09-06 14:54


origine


risposte:


Assicurarsi 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 utilizzando le query multimediali:

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

150
2017-09-06 15:06



Aggiornamento Bootstrap 3.2: (versione corrente)

La versione corrente di Bootstrap è stabile 3.2.0.
Con la versione 3.2, la stampa visibile è 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 classi 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

Bootstrap 2.3.1 versione:

Dopo aver aggiunto il file bootstrap.css nel tuo HTML,
Trova le parti che non vuoi stampare e aggiungere hidden-print classificare in tag. Perché il file css include questo:

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

175
2018-05-20 06:17



Sostituisci ogni col-md- con col-xs-

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

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


101
2017-11-11 15:22



C'è una sezione di @media print codice nel file css (Bootstrap 3.3.1 [UPDATE:] to 3.3.5), questo elimina virtualmente tutto lo stile, in modo da ottenere stampe abbastanza blandi anche quando funziona.

Per ora ho dovuto ricorrere allo stripping del @media print sezione da bootstrap.css - che sono veramente non contento, ma i miei utenti vogliono catturare schermate dirette, quindi per ora dovremo farlo. Se qualcuno sa come sopprimerlo senza modifiche ai file di bootstrap sarei molto interessato.

Ecco il blocco di codice "offendente", 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;
  }
}

15
2017-12-04 16:45



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();
  }
});

6
2017-11-04 06:38



Nel caso qualcuno stia cercando una soluzione per Bootstrap v2.X.X Qui. Sto lasciando la soluzione che stavo usando. Questo non è completamente testato su tutti i browser, tuttavia potrebbe essere un buon inizio.

1) assicurati che l'attributo media di bootstrap-responsive.css è screen.

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

2) creare a print.css e assicurarsi che il suo attributo multimediale print

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

3) all'interno print.css, aggiungi la "larghezza" del tuo sito web in html e corpo

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

4.) riproduce le necessarie classi di media query in print.css perché erano dentro bootstrap-responsive.css e lo abbiamo disattivato 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}

3
2017-10-30 09:06



2 cose FYI -

  1. Per ora, hanno aggiunto alcune classi di commutazione. Guarda cosa è disponibile nell'ultima versione stabile - stampa cambia in responsive-utilities.less
  2. Nuova e migliorata soluzione in arrivo in Bootstrap 3.0 - stanno aggiungendo un file print.less separato. Vedere separato print.less

2
2018-03-28 21:23



Per rendere la visualizzazione di stampa simile a tablet o desktop includere bootstrap come .less, non come .css e quindi è possibile sovrascrivere le classi responsive di bootstrap alla fine del file bootstrap_variables per 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 lazy delle variabili in modo che vengano applicate.


0
2018-06-02 06:38



Se si desidera mantenere colonne in formato A4 (che è di circa 540 pixel), 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">


0
2018-03-20 08:50