将CSS添加到默认的Google Chrome打印中


Adding CSS to default Google Chrome printing

我正在用(ctrl+p)打印我的PHP应用程序的一页(默认打印)。我如何才能确保CSS(表格、填充、单元格间距、不透明度的背景图片)打印在纸上。我正在从另一个文件调用CSS。

谢谢你的帮助和时间。

您必须添加此

html{-webkit-print-color-adjust:exact;}

对于项目的任何css文件,最好是打印文件,因为其他文件在打印时不会加载。它将强制chrome使用每个背景颜色和图像完全按照编码。

将其添加到HTML页面中。现在您需要手动调整页面,使其适合打印页面。(使用Chrome浏览器中的预览功能

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

浏览器感兴趣的部分是media=print


你可以在这里找到一些打印网页的更多样式命令:

  • CSS如何:使用CSS优化打印页面
  • 用CSS打印一本书:Boom
  • 完整的css指南-打印
  • CSS页面媒体-@page规则

您需要包含一个打印样式表,Dan Lee对此进行了详细介绍。然而,这只是答案的一半。另一半是Chrome(和Safari)的打印选项较差,无法打印background-imagesbackground-colors。当我尝试创建一个可打印版本的FullCalendar时,我必须弄清楚这一切,该版本使用颜色来区分不同类型的日历条目。

我包括以下打印说明:

  1. Firefox的打印输出最好,Internet Explorer位居第二
  2. 您可能需要在浏览器中打开"打印背景"选项:在Firefox或Internet Explorer中:转到"文件"->"页面设置"->"检查打印背景"(颜色和图像)
  3. 尽管Chrome和Safari可以工作,但它们没有打印背景选项。很难区分日历上的条目类型

如果你的页面足够简单,你可以在实际的<img>s中进行sub,并使用CSS将它们拉伸并定位在divtd中的任何文本后面。这对于我做的FullCalendar项目来说是不可能的,但它在一个更简单的表上运行得很好。它与Chrome、Firefox和IE兼容,不需要用户切换特定选项即可获得正确的输出。

这是Windows上Chrome 17.0.963.83和Safari 5.1.4的版本。