Cara membuat halaman Twitter-Bootstrap yang dapat dicetak

Saya menggunakan Twitter-Bootstrap dan saya harus dapat mencetak halaman seperti yang terlihat di browser. Saya dapat mencetak halaman lain yang dibuat dengan Twitter-Bootstrap, tetapi sepertinya saya tidak dapat mencetak halaman saya yang menggunakan murni Twitter-Bootstrap. Apakah saya kehilangan tag di suatu tempat?

Halaman TB resmi saat dicetak:

Halaman saya saat dicetak:

Seperti apa sebenarnya halaman saya:

Pastikan memiliki lembar gaya yang ditetapkan untuk dicetak.
Ini bisa berupa stylesheet yang terpisah:

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

atau yang Anda bagikan untuk semua perangkat:

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

Kemudian, Anda dapat menulis gaya Anda untuk printer di stylesheet yang terpisah atau yang dibagikan menggunakan kueri media:

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

Pembaruan Bootstrap 3.2: (rilis saat ini)

Versi Bootstrap stabil saat ini adalah 3.2.0 .
Dengan versi 3.2-cetak sudah usang, jadi Anda harus menggunakan seperti ini:

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

Pembaruan Bootstrap 3:

Kelas cetak sekarang dalam dokumen: 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

Versi Bootstrap 2.3.1:

Setelah menambahkan file bootstrap.css ke HTML Anda,
Temukan bagian-bagian yang tidak ingin Anda cetak dan tambahkan hidden-printkelas ke dalam tag. Karena file css termasuk ini:

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

Ganti setiap col-md-dengancol-xs-

misalnya: ganti setiap col-md-6ke col-xs-6.

Ini adalah hal yang berhasil bagi saya untuk menyingkirkan saya dari masalah ini, Anda dapat melihat apa yang harus Anda ganti.

Ada bagian @media printkode dalam file css (Bootstrap 3.3.1 [UPDATE:] ke 3.3.5), ini melucuti hampir semua gaya, sehingga Anda mendapatkan hasil cetak yang cukup hambar bahkan ketika sedang bekerja.

Untuk saat ini saya harus menggunakan stripping @media printbagian dari bootstrap.css - yang saya benar-benar tidak senang tetapi pengguna saya ingin langsung ambil layar jadi ini harus dilakukan untuk saat ini. Jika ada yang tahu cara menekannya tanpa perubahan pada file bootstrap saya akan sangat tertarik.

Inilah blok kode 'menyinggung', dimulai pada baris # 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;
  }
}

Pilihan terbaik yang saya temukan adalah 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();
  }
});

Jika seseorang mencari solusi untuk Bootstrap v2.XX di sini. Saya meninggalkan solusi yang saya gunakan. Ini tidak sepenuhnya diuji pada semua browser namun ini bisa menjadi awal yang baik.

1) pastikan atribut media bootstrap-responsive.cssadalah screen.

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

2) buat print.cssdan pastikan atribut medianyaprint

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

3) di dalam print.css, tambahkan "lebar" situs web Anda di html & tubuh

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

4.) mereproduksi kelas kueri media yang diperlukan print.csskarena ada di dalam bootstrap-responsive.cssdan kami telah menonaktifkannya saat mencetak.

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

Ini adalah versi lengkap dari 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 hal FYI -

1. Untuk saat ini, mereka telah menambahkan beberapa kelas toggle. Lihat apa yang tersedia di rilis stabil terbaru - cetak matikan dalam utilitas responsif
2. Solusi baru dan lebih baik datang dalam Bootstrap 3.0 - mereka menambahkan file print.less terpisah. Lihat print.less terpisah

Untuk membuat tampilan cetak terlihat seperti tablet atau desktop, sertakan bootstrap sebagai .less, bukan sebagai .css dan kemudian Anda dapat menimpa kelas respons bootstrap di akhir file bootstrap_variables misalnya seperti ini:

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

Jangan khawatir tentang menempatkan variabel ini di akhir file. KURANG mendukung malas memuat variabel sehingga mereka akan diterapkan.

Jika Anda ingin menjaga kolom pada cetakan A4 (yaitu sekitar 540px) ini adalah ide yang bagus

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

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

Anda bisa menggunakannya seperti ini:

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