javascript 如何应用 CSS 进行打印？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9840004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i apply CSS to print?
提问by Mert Karatas
I am trying to print a div in one of my pages but i can't apply css when printing. Writing media="print" inside of the style tags doesn't work. What should i do?
我试图在我的一个页面中打印一个 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>
回答by Brian Graham
Use the following:
使用以下内容：
<style type="text/css">
@media print
{
body {
/* styles */
}
}
</style>
回答by Rony SP
There is many ways for that:
有很多方法可以做到：
First: <style type="text/css"media="print">
第一的： <style type="text/css"media="print">
Second: <style type="text/css"media="screen">
第二： <style type="text/css"media="screen">
Third:
第三：
@media print
{
body { margin: 0; background-image: none; font-size: 12pt; }
}
Hope this is Helpful for you..
希望这对你有帮助..
回答by scottheckel
What you're doing in your original message will work fine. It's just the old schoolway of doing things.
您在原始消息中所做的将正常工作。这只是老派的做事方式。
One thing to note is that the browser will not apply all of your styles in the print mode.It picks and chooses which styles are print appropriate. I have also found that if you use a HTML 5 doctype it will give you slightly different results.
需要注意的一件事是浏览器不会在打印模式下应用您的所有样式。它挑选并选择适合打印的样式。我还发现，如果您使用 HTML 5 文档类型，它会给您带来略有不同的结果。
Here's a simple example similar to yours that you can try in the browser.
这是一个类似于您的简单示例，您可以在浏览器中尝试。
<!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>
Here's a screenshot from the print preview of Chrome (v19.0.1077.3 canary), which you mentioned your using to test this.
这是 Chrome (v19.0.1077.3 canary) 打印预览的屏幕截图，您提到了用于测试此功能。
回答by ThdK
I'm using the Jquery Print Element 1.2plugin to print only the content of a div. This way, you don't need to set css display:none for all those elements you don't want to print.
我正在使用Jquery Print Element 1.2插件来仅打印 div 的内容。这样，您无需为所有不想打印的元素设置 css display:none。
I know it's not a straight answer on your question, but see it as a kind suggestion.
我知道这不是对您问题的直接回答，但将其视为一个善意的建议。
Example:
例子：
$('SelectorToPrint').printElement();
Here's my implementation using the classNameToAdd option:
这是我使用 classNameToAdd 选项的实现：
function printDiv(divToPrint) {
$('#' + divToPrint).printElement(
{
printBodyOptions:
{
classNameToAdd: 'printarea'
}
}
);
}
Once you've added the plugin to your page you can call the above function when the users clicks the print button/link.
将插件添加到页面后，您可以在用户单击打印按钮/链接时调用上述函数。
<a href="#" onclick="javascript:printDiv('theIDofYourDiv')">Print part of the page</a>
You can download this plugin and find more documentation here.
您可以下载此插件并在此处找到更多文档。
