2013-02-23 133 views
12

我正在創建電視節目表,並且至少有一個標準瀏覽器不應該有任何打印問題。在Google Chrome中爲每個頁面打印頁眉

我需要在每個頁面上放置徽標和標題以及表格標題,經過幾天的嘗試和搜索後,我發現Chrome不會在每個頁面上打印表格標題和position: fixed元素,因爲此known bug

由於功能,如打印背景顏色與-webkit-print-color-adjust: exact我已經頻繁使用和更改頁面邊框與CSS @page財產,我已經定製了自己的看法使用谷歌Chrome,但現在,我看到它無法打印頭我正在尋找一個替代品分別是:

  • 要忘記Chrome和啓動這需要做調整,以打印背景顏色和更改頁邊距(恐怕這是不可能的),其他瀏覽器創建打印視圖。
  • 找到一個CSS/JS解決方案,使Google Chrome能夠在每個頁面上打印表格標題。

TL; DR:你知道任何jQuery/JavaScript /等。在Chrome的每個頁面上打印表格標題的代碼?

回答

10

是的,這是一個Webkit/Chrome的東西。 它不會在每個頁面上打印thead。例如FF。 你可以做些什麼來達到這樣的效果是使用分頁符。

分頁符只對塊元素有效,所以你應該相應地設置你的tr的樣式。

像這樣:

tr{ 
    display:block; 
} 

現在,你應該開始複製你的THEAD,並把它在每一個X行使用javascript:

var head = $('table thead tr'); 
$("tbody tr:nth-child(10n+10)").after(head.clone()); 

在屏幕上,你不希望所有這些頭。與媒體查詢中刪除他們這(爲方便起見,我加了。頭類在我的第> TR行:

@media screen { 
    tbody .head{ 
     display: none; 
    } 
} 

每個前現在。頭進行分頁:

tbody tr.head { 
    page-break-before: always; 
    page-break-inside: avoid; 
} 

檢查它請注意:jsfiddle不允許您打開預覽框,因此打印不起作用,將所有內容合併到您自己的文件中,您將看到表格會分裂,樣式不完美,它不像你的瀏覽器本身決定在哪裏拆分那樣靈活,但是,嘿,這是一些東西。

+1

謝謝您的回答。我面臨這個問題已經很長時間了,我沒有使用Chrome。 :D無論如何,你的答案似乎很有希望,我會盡快給它一個答案。再次感謝。 – 2013-10-04 12:51:42

+4

這似乎有效,但這意味着您必須在放置分頁符時保持一定的保守性。猜測打印時任意HTML元素的垂直高度涉及的所有變量是不可能的。但是,如果內容的高度非常一致,則可以使其工作良好。 – Simon 2014-03-28 12:00:22

2

這應該是一個評論,但我沒有代表。無論如何,我有posted a solution here解決這個問題,並不需要你嘗試搶佔強制分頁符(一種本質上不可靠,往往會浪費紙張的技術)的自然分頁符。

+0

感謝您的回答,我會盡快給它嘗試。 – 2014-09-10 16:19:38

相關問題