如何应用CSS进行打印？
[英]How can i apply CSS to print?
问题描述
I am trying to print a div in one of my pages but i can't apply css when printing. 
我正在尝试在我的页面之一中打印div，但是在打印时我无法应用CSS。 Writing media="print" inside of the style tags doesn't work. 在样式标签中写入media =“ print”无效。 What should i do? 我该怎么办？
<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>
4 个解决方案
解决方案1
8 2012-03-23 13:31:12
Use the following: 使用以下内容：
<style type="text/css">
@media print
{
body {
/* styles */
}
}
</style>
解决方案2
3 2012-03-23 13:52:33
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.. 希望这对您有帮助。
解决方案3
1 2012-03-23 13:52:11
What you're doing in your original message will work fine. 您在原始消息中所做的工作将正常进行。 It's just the old school way 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）的打印预览的屏幕截图，您提到过使用它来进行测试。
解决方案4
0 2012-03-23 13:58:45
I'm using the Jquery Print Element 1.2 plugin to print only the content of a div. 我正在使用Jquery Print Element 1.2插件仅打印div的内容。 This way, you don't need to set css display:none for all those elements you don't want to print. 这样，您无需为所有不想打印的元素设置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 . 您可以下载此插件，并在此处找到更多文档。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.