如何创建可打印的 Twitter-Bootstrap 页面
Posted
技术标签:
【中文标题】如何创建可打印的 Twitter-Bootstrap 页面【英文标题】：How to create a printable Twitter-Bootstrap page 【发布时间】：2012-08-31 10:26:25 【问题描述】：我正在使用 Twitter-Bootstrap，我需要能够按照浏览器上的外观打印页面。我可以打印使用 Twitter-Bootstrap 制作的其他页面，但我似乎无法打印使用纯 Twitter-Bootstrap 的页面。我是不是在某个地方漏掉了一个标签？
打印时的官方 TB 页面：
打印时我的页面：
我的页面实际上是什么样子的：
【问题讨论】：
您是否指定了 media="screen" 属性？看看我的回答。 【参考方案1】：Bootstrap 3.2 更新：（当前版本）
当前稳定的 Bootstrap 版本是3.2.0。 不推荐使用 3.2 版可见打印，因此您应该像这样使用：
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
引导程序 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 版本：
在您的 html 中添加 bootstrap.css 文件后，
找到您不想打印的部分并将hidden-print 类添加到标签中。
因为css文件包含这个：
@media print
.visible-print display: inherit !important;
.hidden-print display: none !important;
【讨论】：
如果我使用.hidden-print 使所有内容（body）不可见，但想要覆盖特定元素显示？
@VincentPoirier - 如果一个元素被隐藏，它里面的所有东西都被隐藏了。所以隐藏身体没有意义，而是取消隐藏身体的一部分。因为没有上下文（容器）可以在其中显示该子元素。而是使用 css 隐藏所有叶元素（例如，在内部 div 上放置一个默认类），然后在需要可见的地方使用适当的 css 类或 id。可能需要进行一些实验才能完全正确。【参考方案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 */
【讨论】：
我刚刚添加了这个： 并且不需要做任何事情别的。像魅力一样工作。谢谢！ 如果您已经在使用此样式表，那么您目前可能拥有media="screen"，打印机不会看到它。您可以将其切换为media="all"，或者按照上述答案的建议直接删除media。
albertedevigo，我需要一些关于样式的帮助。比如改变字体大小、宽度……究竟需要改变什么？ TIA。 @JayQ。 : 那仍然有效还是过时了？因为我无法让它工作。
@dreamster，只需将您的样式包含在适用于打印的样式表中即可。请注意，CSS 级联仍然有效；所以顺序、继承和选择器优先级会影响结果。您可能会用自己的代码提出一个新问题。【参考方案3】：
将每个col-md- 替换为col-xs-
例如：将每个col-md-6 替换为col-xs-6。
这对我来说是解决这个问题的方法，你可以看看你需要更换什么。
【讨论】：
谢谢！与打印视图相比，HTML 视图的比例存在问题......现在一切都很好！ 嘿，谢谢！我在打印页面时遇到了问题，每个div 都低于前一个。这个答案给了我一个提示，我在每个col-md-* 之前添加了col-xs-*，这解决了这个问题。免责声明：我没有测试将容器添加为<div class="row"></div>，这也可能解决了问题（似乎很明显）。
除非打算为窄屏幕（例如手机）提供与打印不同的布局。引导打印机逻辑认为其打印屏幕如此狭窄似乎很奇怪。
这应该在顶部。
只是补充一点，你可以替换 col-md- 如答案所说，或者你可以添加 col-xs- 像：class="col-md-6 col-xs-6" 和你可以根据您的设计要求混合搭配。【参考方案4】：
在 css 文件中有一段 @media print 代码（Bootstrap 3.3.1 [更新：] 到 3.3.5），这几乎去除了所有的样式，所以即使它正在工作，你也会得到相当平淡的打印输出.
现在我不得不从 bootstrap.css 中删除 @media print 部分 - 我真的不对此感到高兴，但我的用户想要直接的屏幕抓取，所以这个'现在必须做。如果有人知道如何在不更改引导文件的情况下抑制它，我会非常感兴趣。
这是“违规”代码块，从第 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;
【讨论】：
【参考方案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();
);
【讨论】：
我尝试了 0.4 和 0.5 但它们都不起作用。 0.5在我的页面后面附加了一些好看的东西，但是原来的页面还在，那我应该怎么打印呢？尝试 0.4 触发了打印，原始页面仍然存在，并且渲染有点损坏。【参考方案6】：如果有人在此处寻找 Bootstrap v2.X.X 的解决方案。我要离开我正在使用的解决方案。 这并未在所有浏览器上进行全面测试，但它可能是一个好的开始。
1) 确保bootstrap-responsive.css 的媒体属性为screen。
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />
2) 创建print.css 并确保其媒体属性print
<link href="/css/print.css" rel="stylesheet" media="print" />
3) 在print.css 中，在html & body 中添加您网站的“宽度”
html,
body
width: 1200px !important;
4.) 在print.css 中重现必要的媒体查询类，因为它们在bootstrap-responsive.css 中，并且我们在打印时禁用了它。
.hiddendisplay:none;visibility:hidden
.visible-phonedisplay:none!important
.visible-tabletdisplay:none!important
.hidden-desktopdisplay:none!important
.visible-desktopdisplay:inherit!important
这里是print.css的完整版：
html,
body
width: 1200px !important;
.hiddendisplay:none;visibility:hidden
.visible-phonedisplay:none!important
.visible-tabletdisplay:none!important
.hidden-desktopdisplay:none!important
.visible-desktopdisplay:inherit!important
【讨论】：
【参考方案7】：2 件事仅供参考 -
-
目前，他们已经添加了一些切换类。查看最新稳定版本中的可用内容 - print toggles in responsive-utilities.less
Bootstrap 3.0 中提供了新的和改进的解决方案 - 他们正在添加一个单独的 print.less 文件。见separate print.less
【讨论】：
【参考方案8】：要使打印视图看起来像平板电脑或桌面，请将 bootstrap 包含为 .less，而不是 .css，然后您可以在 bootstrap_variables 文件的末尾覆盖引导响应类，例如：
@container-sm: 1200px;
@container-md: 1200px;
@container-lg: 1200px;
@screen-sm: 0;
不必担心将这些变量放在文件末尾。 LESS 支持延迟加载变量，以便应用它们。
【讨论】：
【参考方案9】：如果您想在 A4 打印（大约 540 像素）上保留列，这是个好主意
@media print
.make-grid(print-A4);
.make-print-A4-column(@columns)
@media print
float: left;
width: percentage((@columns / @grid-columns));
你可以这样使用它：
<div class="col-sm-4 col-print-A4-4">
【讨论】：
以上是关于如何创建可打印的 Twitter-Bootstrap 页面的主要内容，如果未能解决你的问题，请参考以下文章
如何通过html创建可以以pdf格式下载/打印的文档页面[重复]
-------如何消除打印机的字迹（字迹打印机消除即）--------
-------如何消除打印机的字迹（字迹打印机消除即）--------