如何處理HTML頁面的打印？

在我的投資組合網站中，我已經在單獨的選項卡（選項卡菜單）下列出了我的項目。除了需要用戶點擊選項卡，打印，單擊下一個選項卡並再次打印相同頁面以獲取所有內容的打印外，此功能運行良好。作爲一個投資組合，我假設訪問者想要打印所有的內容。如何處理HTML頁面的打印？

打印網頁時有沒有創造出不同的風格一般的方法是什麼？或者我應該在我的頁面上添加一個打印機圖標，該圖標將用戶重定向到其他頁面，其中所有數據都位於一個大塊中，然後提示用戶的瀏覽器開始打印？

來源

2010-03-16 Jaran

我通常使用的打印介質標籤定義打印樣式我的網頁：

@media print 
{ 
    #header, #nav 
    { 
     display: none; \\* to not print an element *\ 
    } 
}

如上圖所示，也可以添加媒體屬性的鏈接標籤，你可以將它添加到您的樣式表：

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

來源

2010-03-16 18:50:29 Dug

我更喜歡使用一個單獨的「打印機友好」的頁面上，一個是消除了圖形和不必要的側欄和這樣。當人們想要打印瀏覽器頁面時，他們通常（雖然並不總是）對那些能夠在Word文檔中流暢運行的文本感興趣。

來源

2010-03-16 18:44:22 Robusto

可以使用media type with css：

像這樣：

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

media="screen"將可以正常使用，該media="print"版本的CSS將在打印時使用。您可以使用該樣式表來覆蓋選項卡樣式，以便內容始終可見...您可以通過打印預覽查看此內容。

來源

2010-03-16 18:44:39

那麼，一般來說，這取決於你如何實現你的「標籤」。但是，您可以將所有內容放入一個HTML頁面，然後使用CSS將其標記出來，JS將隱藏/僅顯示一個「標籤」的內容。

然後，你可以只使用一個替代樣式表進行打印，這將在打印的格式格式化整個頁面。

然而，這可能會混淆用戶，誰希望得到什麼，他們看到屏幕上的打印輸出，所以它可能是更好地鏈接到一個網頁，其中顯示一個頁面上的所有項目。有些人甚至更喜歡在屏幕上閱讀。

來源

2010-03-16 18:44:58 sleske

創建一個大文件，並添加Readability。下面是調用它，他們爲他們的書籤需要一個乾淨的版本的JavaScript：

function Readability() { 
    readStyle = 'style-newspaper'; 
    readSize = 'size-medium'; 
    readMargin = 'margin-wide'; 
    _readability_script = document.createElement('SCRIPT'); 
    _readability_script.type = 'text/javascript'; 
    _readability_script.src = 'http://lab.arc90.com/experiments/readability/js/readability.js?x=0'; //+ (Math.random()); 
    document.getElementsByTagName('head')[0].appendChild(_readability_script); 
    _readability_css = document.createElement('LINK'); 
    _readability_css.rel = 'stylesheet'; 
    _readability_css.href = 'http://lab.arc90.com/experiments/readability/css/readability.css'; 
    _readability_css.type = 'text/css'; 
    _readability_css.media = 'all'; 
    document.getElementsByTagName('head')[0].appendChild(_readability_css); 
    _readability_print_css = document.createElement('LINK'); 
    _readability_print_css.rel = 'stylesheet'; 
    _readability_print_css.href = 'http://lab.arc90.com/experiments/readability/css/readability-print.css'; 
    _readability_print_css.media = 'print'; 
    _readability_print_css.type = 'text/css'; 
    document.getElementsByTagName('head')[0].appendChild(_readability_print_css); 
}

來源

2010-03-16 18:45:35

我大多與尼克同意，不過，我一般喜歡讓我的CSS在一個文件中結束：

@media print { 
    #top { 
     width: 100% !important; 
     font-size: 120% !important; 
     height: 2em !important; 
    } 
    #top h3 { 
     width: 100% !important; 
     text-align: center !important; 
    } 
}

或其他。基本上，您的打印樣式表與您的其他樣式位於相同的文件中，但被「@media print {...}」包圍;

來源

2010-03-16 18:50:16 Chibu

如何處理HTML頁面的打印？

回答

相關問題