如何應用CSS打印？

我想打印一個div在我的頁面之一，但我打印時不能應用css。在樣式標籤內寫入media =「print」不起作用。我該怎麼辦？如何應用CSS打印？

<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>

來源

2012-03-23 Mert Karatas

[媒體打印CSS]（http://www.w3.org/TR/CSS2/media.html） – jbabey 2012-03-23 13:28:46

嘗試這種結構： '<風格類型= 「文本/ CSS」> @media打印體{...} ... ' – Antonix 2012-03-23 13:29:34

選中此項：http：// stackoverflow。com/questions/9724163/how-to-use-javascript-to-print-the-contents-on-a-div/ – Jigs 2012-03-23 13:31:51

使用以下：

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

來源

2012-03-23 13:31:12

在打印頁面沒有css，它仍然是一樣的。 – 2012-03-23 13:33:39

你使用什麼瀏覽器？也不能保證「打印預覽」將樣式文檔;因爲它是由預覽程序決定的，所以實際上嘗試打印頁面。 – 2012-03-23 13:39:32

我正在使用Chrome瀏覽器，我試圖實際打印。但仍然沒有應用CSS。 – 2012-03-23 13:45:38

你在做什麼在你的原始郵件將正常工作。這只是老學校的做事方式。

有一點需要注意的是，瀏覽器將不會在打印模式下應用所有樣式。它挑選並選擇哪種樣式適合打印。我還發現，如果你使用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>

下面是從瀏覽器（v19.0.1077.3金絲雀），您提到您的使用，以測試這個的打印預覽截圖。

enter image description here

來源

2012-03-23 13:52:11 scottheckel

有這許多的方法：

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

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

三：

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

希望這有助於您。。

來源

2012-03-23 13:52:33

我使用Jquery Print Element 1.2插件僅打印div的內容。這樣，您不需要設置CSS顯示：對於您不想打印的所有元素，都不顯示。

我知道這不是對您問題的直接回答，而是將其視爲一種建議。

例子：

$('SelectorToPrint').printElement();

下面是一個使用classNameToAdd選擇我的實現：

function printDiv(divToPrint) { 

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

      } 
     } 
    ); 

}

一旦你添加插件到你的頁面，您可以撥打上面的函數，當用戶點擊打印按鈕/鏈接。

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

您可以下載這個插件，找到更多的文檔here。

來源

2012-03-23 13:58:45 ThdK

如何應用CSS打印？

回答

相關問題