如何应用 CSS 进行打印？答案

【问题标题】：How can i apply CSS to print?如何应用 CSS 进行打印？
【发布时间】：2012-03-23 13:25:58
【问题描述】：

我正在尝试在我的一个页面中打印一个 div，但我无法在打印时应用 css。在样式标签中写入 media="print" 不起作用。我该怎么办？

   <style type="text/css" media="print">
body
{
font-size:medium;
color:Black;
font-size:14px;
}
input 
{
margin:0px;
font-size:14px;


}
.grid
{
border-color:Gray;
border-width:1px;

}
.alan
{
border-style:none;

}

.grid1
{
border-color:Gray;
border-width:1px;
}
    </style>

【问题讨论】：

media print CSS
试试这个结构：<style type="text/css"> @media print body {...} ... </style>
检查这个：stackoverflow.com/questions/9724163/…
@import url(somefile.css) 打印；试试这个

标签： javascript jquery css printing media

【解决方案1】：

使用以下内容：

<style type="text/css">
    @media print
    {
        body {
            /* styles */
        }
    }
</style>

【讨论】：

它仍然保持不变，打印页面没有 css。
你用的是什么浏览器？也不能保证Print Preview 会为文档设置样式；因为它是由预览程序决定的，所以实际尝试打印一个页面。
我正在使用 Chrome 并尝试实际打印。但仍然没有应用 css。

【解决方案2】：

有很多方法：

第一：<style type="text/css"media="print">

二：<style type="text/css"media="screen">

第三：

@media print 
 {
 body { margin: 0; background-image: none; font-size: 12pt; }
 }

希望这对你有帮助..

【讨论】：

【解决方案3】：

您在原始消息中所做的一切都可以正常工作。这只是老派的做事方式。

需要注意的一点是，浏览器不会在打印模式下应用您的所有样式。它会挑选适合打印的样式。我还发现，如果您使用 HTML 5 文档类型，结果会略有不同。

这是一个与您的类似的简单示例，您可以在浏览器中尝试。

<!DOCTYPE html>
<html>
<head>
<style media="print">
.hideForPrint { display:none; }
.anotherSTyle { font-family: Verdana; text-decoration:underline; }
</style>
</head>
<body>
<div class="hideForPrint">Print This?</div>
<div class="anotherStyle">Another Style</div>
</body>
</html>

这是 Chrome (v19.0.1077.3 canary) 的打印预览的屏幕截图，你提到你用它来测试它。

【讨论】：

【解决方案4】：

我正在使用Jquery Print Element 1.2 插件仅打印 div 的内容。这样，您无需为所有不想打印的元素设置 css display:none。

我知道这不是对您问题的直接回答，但将其视为一种善意的建议。

例子：

$('SelectorToPrint').printElement();

这是我使用 classNameToAdd 选项的实现：

function printDiv(divToPrint) {

   $('#' + divToPrint).printElement(
        {
            printBodyOptions:
            {
                classNameToAdd: 'printarea'

            }
        }
   );

}

将插件添加到页面后，您可以在用户单击打印按钮/链接时调用上述函数。

<a href="#" onclick="javascript:printDiv('theIDofYourDiv')">Print part of the page</a>

您可以下载此插件并查找更多文档here。

【讨论】：