Chrome 打印预览与 DEVTools 中的不同答案

【问题标题】：Chrome print preview different than in DEVToolsChrome 打印预览与 DEVTools 中的不同
【发布时间】：2014-11-18 14:43:23
【问题描述】：

我已经设置了一个打印样式表，在 Firefox 中看起来不错。

在 Chrome 中，整个页面在 打印预览 (CTRL+P) 中被破坏，但如果我打开 Chrome DEVTools (F12) 并使用 emulate CSS media 功能，页面看起来是正确的 - 比如在火狐中。

奇怪的是，如果我再次打开打印预览，在我激活一次模拟选项后，页面在打印预览中看起来正确！即使我只是激活然后停用模拟选项，这样做之后打印预览总是正确的！

我的 print.css 以

开头

@media print { ... }

并包含在页面<head> 中，如下所示：

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

我已尝试删除 media="print"，但没有任何变化。

【问题讨论】：

【解决方案1】：

在您的打印样式表中，您需要添加以下内容：

* {
    transition: none !important;
}

Chrome 似乎没有禁用打印媒体的转换属性。

Here 是我找到答案的地方。

【讨论】：

【解决方案2】：

要添加到 Ustice 的答案和 Jeeva Jsb 的评论：您可能需要在应用 transition: none !important 规则后允许 DOM 重新呈现。在以编程方式打印页面之前，我通过在正文中添加 print CSS 类来实现这一点：

CSS：

body.print * {
  transition: none !important;  
}

JS（使用 jQuery）：

$('body').addClass('print');
setTimeout(function() {
  window.print();
}, 0);

不要忘记在您的用户完成页面打印后删除print 类。（见how to detect window.print() finish。）

【讨论】：

【解决方案3】：

我遇到了完全相同的头部断裂问题，我已经能够解决它。

在我的情况下，问题是由于我没有在“屏幕”CSS 中使用的“打印”CSS 使用自定义@font-face 引起的。

似乎浏览器在第一次预览时没有从打印样式表中加载自定义 @font-face 并且使页面或多或少地呈现为空。它会在第二次打印预览时完美呈现。

我的解决方案是在屏幕 css 中也从 pint css 加载相同的 @font-face 规则。这样，在查看打印预览时浏览器已经加载了字体，这一切都像一个魅力。

【讨论】：

【解决方案4】：

如果您在给定的答案中没有找到解决方案，那么我有话要说：

在 Chrome DEVTools 中 emulation css media 中的 print 选项仅用于将打印 css 规则应用于页面，出于测试目的，它不考虑与打印相关的所有其他内容，它显示打印预览但有时它不会将打印页面显示为实际的打印预览。

如果您使用的是引导程序，那么如果您仅使用 col-md-* 或 col-sm-* 它将不起作用，但如果您使用 col-xs-* 那么它将起作用，因为问题是页面本身很小像素，所以 bootstrap 认为它需要应用 xs 样式。

不同的浏览器在打印页面时表现不同。唯一的测试打印的最佳方法是实际打印，或打印到 pdf。

【讨论】：