5

我的网站运行良好，但是当我在浏览器上单击文件 > 打印（其浏览器打印预览）时，所有 CSS 都被弄乱了，背景颜色被替换为空白，并且在预览页面上没有获得徽标。

那么我如何创建用于打印预览的 CSS 文件以及当用户单击打印时我如何调用。

4

5 回答 5

14

您需要为您遇到此错误的原因提供您的标记。

信息：浏览器默认从不打印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;

于 2012-10-04T07:31:57.553 回答
5

创建用于打印的样式表

<!-- 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 中的分页符可靠，尤其是考虑到动态创建的页面上的可变内容长度，但如果使用得当，则在打印您的网站时会有所不同。
  • 打印页面大小 显然，您的计算机显示器可以提供很大的宽度来查看页面，但我建议将内容区域宽度设置为 600 像素。

由大卫沃尔什撰写

于 2012-10-04T07:51:01.073 回答
2

外星人先生已经回答了为什么你没有得到任何背景颜色（这也适用于你的背景标志）。但是，您说您的“CSS 混乱”。

对于 HTML 页面，请记住一件简单的事情：不要打印它们。至少不是你通常的、大量基于图形的页面。如果您想打印路线，您是否注意到 Google 如何提供特殊版本的地图？几乎所有其他提供搜索结果或路线的页面也将为您提供特殊的打印功能。甚至维基百科也有每篇文章的可打印版本。这些提供了一个非常简单的布局，没有页面导航和背景图像等不必要的细节。

这是什么原因？印刷媒体中的 CSS 是一团糟。坚持非常基本的布局，提供最必要的信息，不要过多分散注意力的图形。如果您确实需要提供网站的可打印版本，请准备 PDF。其他一切都只是受虐狂。

于 2012-10-04T07:39:43.783 回答
0

试试这个，希望对你有帮助

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

现在检查打印

于 2012-10-04T07:39:20.893 回答
0

外星人的回答是对的，我同意。我想为此添加一些图片。

在 chrome 中，打印预览有 2 个设置， 这是打印预览中的选项部分。 在这里启用背景和图形。

我们需要根据我们的选择启用。

其次，如果您需要所有的 css 样式出现在打印中，

链接标签中的属性媒体也将启用整个 css 进行打印。

通过将媒体指定为屏幕打印，您将在显示器和打印媒体中发现相同的页面外观。

如果您想在打印过程中省略某些样式，请创建一个单独的 css 文件进行打印，并将其作为链接包含在页面中。媒体打印属性的 css 属性只会被挑选用于打印。

于 2021-08-25T05:49:03.083 回答