如何创建可打印的Twitter-Bootstrap页面

Question

我正在使用Twitter-Bootstrap,我需要能够以在浏览器上看起来的方式打印页面.我可以打印用Twitter-Bootstrap制作的其他页面,但我似乎无法打印纯粹使用Twitter-Bootstrap的页面.我在某个地方错过了标签吗？

打印时的官方TB页面:

我的页面打印时:

我的网页实际上是什么样的:

Answer 1

Bootstrap 3.2更新:(当前版本)

目前稳定的Bootstrap版本是3.2.0.
随着版本3.2不推荐使用visible-print,所以你应该这样使用:

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

Bootstrap 3更新:

打印类现在位于文档中: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版本:

将bootstrap.css文件添加到HTML后,
找到您不想打印的部分并将hidden-print类添加到标记中.因为css文件包含这个:

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

Answer 2

务必为打印指定样式表.
它可以是一个单独的样式表:

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

或者您为所有设备共享的内容:

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

然后,您可以使用媒体查询在单独的样式表或共享样式表中为打印机编写样式:

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

Answer 3

每次更换col-md-使用col-xs-

例如:将每个替换col-md-6为col-xs-6.

这对我有用,让我摆脱这个问题你可以看到你必须要更换的东西.

Answer 4

@media print在css文件中有一段代码(Bootstrap 3.3.1 [更新:]到3.3.5),这几乎剥离了所有样式,所以即使它正在工作,你也会得到相当平淡的打印输出.

现在,我不得不求助于剥出@media print从bootstrap.css部分-这我真的不开心,但我的用户希望直接屏幕抓斗所以这必须现在做的事.如果有人知道如何抑制它而不更改引导程序文件我会非常感兴趣.

这是'违规'代码块,从第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;
  }
}

Answer 5

我找到的最佳选择是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();
  }
});