如何應用CSS進行打印？
[英]How can i apply CSS to print?
問題描述
我正在嘗試在我的頁面之一中打印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>
4 個解決方案
解決方案1
8 2012-03-23 13:31:12
使用以下內容：
<style type="text/css">
@media print
{
body {
/* styles */
}
}
</style>
解決方案2
3 2012-03-23 13:52:33
有很多方法可以做到這一點：
首先： <style type="text/css"media="print">
第二個： <style type="text/css"media="screen">
第三：
@media print
{
body { margin: 0; background-image: none; font-size: 12pt; }
}
希望這對您有幫助。
解決方案3
1 2012-03-23 13:52:11
您在原始消息中所做的工作將正常進行。 這只是舊的做事方式。
需要注意的一件事是，瀏覽器不會在打印模式下應用所有樣式。 它選擇並選擇適合打印的樣式。 我還發現，如果您使用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
0 2012-03-23 13:58:45
我正在使用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>
您可以下載此插件，並在此處找到更多文檔。
如何將CSS span應用於沒有換行符的串聯字符串？
[英]How can I apply CSS span to a concatenated string with NO line breaks?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.