2010-07-25 56 views
2

我有一些代碼可以爲一個網頁上的多個客戶生成賬單。我使用div元素style="page-break-after:always",因此用戶可以一次打印每個客戶帳單,而獨特客戶的帳單將全部打印在另一張紙上。我的問題是,我想通過在一張賬單和下一張賬單之間留出一些空間,讓賬單在用戶屏幕上更具可讀性,但我不想打印一堆空白。如何在打印機忽略的賬單之間引入一些額外的空間?用HTML生成一個打印機將忽略的空間

回答

5

您只能爲打印機實現特殊的樣式表,並且該樣式會忽略某些元素。像這樣的東西會工作:

<link rel="stylesheet" type="text/css" media="print" href="/css/print.css"> 

那麼你的print.css文件中,你可以有一切你原來的CSS和定義是這樣的:

.printhide{ display:none; } 

在您的HTML文件,所有的元素,你想要隱藏只需添加printhide類。例如。

<br class="printhide"> 
+0

工程就像一個魅力,非常感謝! – ubiquibacon 2010-07-25 06:28:05

+0

很高興能有所幫助:) – Sam152 2010-07-25 10:00:34

2

使用print css。這將是一個具有打印特定規則的css文件,可以使用其他所有css文件加載,但具有media="print"屬性可告知瀏覽器打印它。

<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
+0

謝謝,但@ Sam152擊敗你:) – ubiquibacon 2010-07-25 06:28:37

+0

@typoknig - 這不是競爭:) – Oded 2010-07-25 06:35:16

+0

很多人在這裏似乎認爲這是。隨着你的非常大的數字,你顯然超出了這種愚蠢:) – ubiquibacon 2010-07-25 06:49:50

2

插入div匯票後:

<div class="bill"> 
...your bill goes here... 
<div class="spacer"></div> 
</div> 

添加打印樣式表:

<link rel="stylesheet" href="screen.css"/> 
<link rel="stylesheet" href="print.css" media="print"/> 

定義空間screen.css:

div.spacer {margin-bottom:2em;} 

隱藏print.css中的空格:

div.spacer {display:none;} 
+0

感謝您的幫助! – ubiquibacon 2010-07-25 06:29:05