在不丟失CSS樣式的情況下打印DIV容器

在閱讀了多篇文章，論壇等之後，我就來到&尋求幫助。在不丟失CSS樣式的情況下打印DIV容器

我想在頁面中添加一個打印按鈕，這將在點擊後打印一張表。我已經試過jqprint（到目前爲止最好的解決方案），但它仍然不正確：

頁面的佈局是一個包含手風琴的選項卡。手風琴裏面有一排有多排的表。每行都有隱藏的div。

當用戶單擊「打印」按鈕時，將顯示隱藏的div，然後使用ID作爲選擇器調用jqprint打印表。

在FireFox中：當我打印到PDF中（爲了節省紙張並對大自然很好）時，只打印表格的前幾行。基本上，PDF將包含許多頁面，但我只獲得第一個，之後沒有任何其他內容。

在Chrome中：根本不起作用。 PDF是空白的。

如果您知道對jqprint的修復或對此問題有任何反饋，請提前致謝。

喬納森

來源

2010-11-11 Jonas

您可以使用另一個CSS打印即print.css，使所有的div可見要打印。

來源

2010-11-11 08:01:44

用於打印的樣式html通常使用不同的樣式表來實現，例如，在你的腦袋元素：

<head> 
    ... 

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

</head>

樣式表的style.css用來風格你在屏幕上的HTML，而print.css用於你的樣式打印HTML。通過在print.css中提供適當的樣式，您可以輕鬆地顯示或隱藏html元素以實現您要查找的輸出。

來源

2010-11-11 08:33:56 Graham

目前，我有媒體=「所有」，所以造型被保留。問題在於，當我在Firefox中使用jqprint時，我無法打印超出特定容器屏幕上顯示的內容，無論是DIV還是表格。 – Jonas 2010-11-11 22:15:04

嘗試使用printThis插件。

傳遞要打印的元素的ID。

我使用這個插件來打印變量rowspan和colspan，它很好地保留了表的結構。

$('#table_id').printThis({ pageTitle: $('#report_title').text()});

希望這可以幫助你

來源

2014-02-24 05:21:55

在不丟失CSS樣式的情況下打印DIV容器

回答

相關問題