为打印创建样式表

Question

我的网站工作正常，但是当我点击文件＆gt;在浏览器上打印（它的浏览器打印预览）所有的CSS都是混乱的，背景颜色被替换为空格而没有在预览页面上获得徽标。

所以我如何为打印预览创建一个CSS文件，以及当用户点击打印时我如何调用。

Answer 1

您需要提供标记，以确定您出现此错误的内容..

信息：浏览器默认从不打印background color，您需要在浏览器中启用该选项..

以防万一你正在使用

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

将其替换为media=screen, print，以便它将规则应用于您的网站以及打印..

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

您还可以使用这样的打印特定样式表：

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

您还可以使用特定于打印的@media查询

@media print {
 /* Whatever */
}

最后但并非最不重要的是在您的浏览器中启用打印：

Firefox ：点击alt（如果您的浏览器菜单栏已隐藏） - 文件 - 页面设置 - 勾选打印背景

Chrome ：要在Chrome中启用打印，请使用此CSS属性-webkit-print-color-adjust:exact;

Answer 2

为打印创建样式表

<!-- Main stylesheet on top -->
<link rel="stylesheet" type="text/css" href="/global.css" mce_href="/global.css" href="/global.css" mce_href="/global.css" media="all" />
<!-- Print only, on bottom -->
<link rel="stylesheet" type="text/css" href="/print.css" mce_href="/print.css" href="/print.css" mce_href="/print.css" media="print" />

不要在打印版本中显示不必要的元素

网页访问者因其上的内容而打印您的网页，而不是在您的网站上看到支持图片。创建一个名为no-print的类，并将该类声明添加到DIVS，图像和其他没有打印值的元素：

.no-print { 
   display:none; 
}

<!-- Example -->
<div id="navigation" class="no-print">
   <!-- who needs navigation when you're looking at a printed piece? -->
</div>

提示

避免不必要的HTML表格当页面结构陷入表格时，控制网站的内容区域可能极具挑战性。
使用分页符浏览器中的分页符不像在Microsoft Word中那样可靠，特别是考虑到动态创建的页面上的可变内容长度，但是如果使用得很好，那么在打印网站时会有所不同。
调整打印页面大小显然，您的计算机显示器可以提供大量的宽度来查看页面，但我建议将内容区域宽度设置为600px。

由David Walsh

撰写

Answer 3

Mr. Alien already answered为什么你没有得到任何背景颜色（这也适用于你的背景标志）。但是，你说你的“CSS乱了”。

对于HTML网页，请注意以下事项：不要打印。至少不是你通常的，基于图形的页面。您是否注意到如果要打印路线，Google如何提供特殊版本的地图？几乎所有提供搜索结果或路线的页面都将为您提供特殊的打印设施。甚至维基百科都有每篇文章的可打印版本。这些提供了一个非常简单的布局，没有不必要的细节作为页面导航和背景图像。

原因是什么？ CSS in print media is a huge mess。坚持非常基本的布局，提供最必要的信息，而不是太多分散注意力的图形。如果您确实需要提供可打印版本的网站准备PDF。其他一切都只是受虐狂。

Answer 4

试试这个，我希望这会对你有所帮助

在mozilla浏览器中，单击文件页面设置 - 格式和选项选项卡选中打印背景选项，然后确定。

现在检查打印

浏览器打印预览不显示CSS背景

4 个答案:

为打印创建样式表

不要在打印版本中显示不必要的元素

提示