如何製作網頁的可打印版本？

我想製作我的網頁的打印版本。我已經嘗試過使用CSS爲頁面製作單獨的樣式表，但它不能正常工作（即它不會在頂部刪除邊距，菜單欄背景也不會消失）。頁面由數百個表格，當我做打印預覽時，他們也會在頁面之間分割。如何製作網頁的可打印版本？

這些表是根據用戶在複選框中的選擇動態生成的可以添加一個可打印的鏈接，該鏈接將從當前頁面獲取內容並將其放入頁面，使其更容易打印？

2012-01-24 waa1990

真的，爲了最大限度地控制佈局，您可能需要執行諸如生成PDF之類的操作。然而，這比創建單獨的樣式表要好得多。 –

我會怎麼做，我從來沒有嘗試過呢？ – waa1990

這需要在後端完成。所以你必須提交用戶的選擇到後端，然後使用最有可能的一些PDF庫來生成PDF文件。 –

有不需要兩個不同的頁面。您應該創建一個不同的CSS工作表。複製現有的文件後，只需將所有內容設置爲黑/白（或者如果真的需要它們，請使用幾種顏色），通過將display: none;放入其CSS聲明中，刪除所有不需要的菜單和元素，然後清除不需要的利潤。你應該在這裏和那裏放一個margin: 0或margin-top: 0聲明。如果你不顯示你的HTML和CSS代碼很難更具體。

來源

2012-01-24 21:31:35 entropid

正如我所說我已經嘗試過這一點，但一些元素不遵循打印CSS規則，仍然顯示任何想法爲什麼？ – waa1990

你應該分析代碼。他們仍然可以繼承某些父元素的屬性。嘗試使用Firebug或Safari/Chrome內置的代碼檢查器。在右側，您可以看到所選元素的CSS屬性以及它從中繼承的位置。這可以幫助你很多。 – entropid

可能是因爲它們在你的web CSS中有更多的權重（例如，在web樣式表中你有一個'id'的規則，而在打印中你有一個'class'的規則）。爲了解決這個問題，在打印CSS中的規則中添加'！important' –

可以在Foundation讓你的頁面的打印版本與@media print

@media print { 
     your styles here 
}

例如，它們具備的基本規則，你可以添加你自己的東西：

@media print { 
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; 
    -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ 
    p a, p a:visited { color: #444 !important; text-decoration: underline; } 
    p a[href]:after { content: " (" attr(href) ")"; } 
    abbr[title]:after { content: " (" attr(title) ")"; } 
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ 
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 
    thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
    tr, img { page-break-inside: avoid; } 
    @page { margin: 0.5cm; } 
    p, h2, h3 { orphans: 3; widows: 3; } 
    h2, h3{ page-break-after: avoid; } 
    .hide-on-print { display: none !important; } 
    .print-only { display: block !important; } 
}

來源

2012-01-24 21:31:05

Zoltan的魔法+1！ –

使用CSS與@media rules。用於在打印視圖中用@media screen和@media print定義用於在屏幕上顯示的樣式。控制頁面中斷爲page-break-* attributes。

@media screen { 
    body { 
     background-image: url(/images/background.png); 
    } 
} 
@media print { 
    body { 
     background-image: none; 
    } 
    tr { 
     page-break-inside: avoid; 
    } 
}

來源

2012-01-24 21:34:56 gilly3

最簡單的方法就是讓另一個樣式表的打印版本和屬性media="print"添加到<link/>它。

來源

2012-01-24 21:52:01

如何製作網頁的可打印版本？

回答

相關問題