格式化HTML報告打印

我有一個HTML「報告」頁面，除其他事項外包含HTML視圖，看起來像這樣：格式化HTML報告打印

enter image description here

當您打印預覽雖然，這看起來很多不太好:)

enter image description here

我知道CSS進行打印，但我不明白的是如何我HTML被解釋的那樣 - 比如爲什麼我的藍色邊框上來罰款，但我有色b oxes（實際上只是td單元格中的空白div）在打印預覽中完全不顯示。另外，爲什麼左邊黑色的白色文字不能打印出來？

是否有一些打印友好的CSS規則？這裏有什麼建議？

BTW - 我試圖在IE 10和Chrome預覽 - 都幾乎做了同樣的

來源

2013-01-24 Matt Roberts

你可以將其轉換爲pdf？參見[如何在這裏] [1] [1]：http://stackoverflow.com/questions/1686280/convert-html-having-javascript-to-pdf-using-java-javascript –

感謝，但在我的情況下，該報告還包含一些openlayers地圖（基於js），所以不會工作，我認爲 –

請參閱http://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in- a4-paper-size-pages –

我猜這個問題與許多瀏覽器（打印時）默認忽略的「background-color」和「background-image」屬性有關。

對於Chrome，您可以將以下代碼添加到您的打印CSS，在Firefox和IE中，您必須在打印對話框中選擇「打印背景」。

:root { 
    -webkit-print-color-adjust: exact; 
}

編輯：在您的HTML

：一種替代方法

既然你正在尋找一種方式來還提供了打印機上可讀的信息，你可能只是爲他們提供了特定內容：

<td class="green_background blue_border"> 
    <img src="img/green_bk.png" class="show_on_print"> 
</td> 

<td class="orange_background blue_border with_star"> 
    <img src="img/orange_with_star_bk.png" class="show_on_print"> 
    <span class="hide_on_print">*</span> 
</td>

在樣式表

：

@media screen,print 
{ 
    .blue_border {border: 1px solid #00F;} 
} 

@media screen 
{ 
    .green_background {background-color: #0F0;} 
    /* hide something when displayed on screen */ 
    .show_on_print {display: none;} 
} 

@media print 
{ 
    img.show_on_print {/* add size, etc. */} 
    .hide_on_print {display: none;} 
}

你必須創建圖像。這個想法是用一些小精靈替代背景，或者僅在打印機上替代背景。這適用於任何瀏覽器

來源

2013-01-24 10:06:36 furins