在前端開發中,CSS打印是一項重要的技能,因為很多時候需要將網頁內容打印成A4紙的格式,如報表、合同等。本文將介紹如何使用CSS將網頁內容規范地打印成A4紙的格式。
首先,我們需要了解A4紙的尺寸和邊距。A4紙的尺寸是210mm×297mm,如果需要打印背景,還需預留5mm的出血距離(即內容距離邊緣5mm)。在CSS中,我們可以通過@page媒體查詢設置A4紙的尺寸和邊距:
@media print { @page { size: A4; margin: 0 1cm; } }
以上代碼會將所有打印輸出的頁面大小設置為A4,并且左右邊距為1cm。接下來,我們需要設置打印內容的字號、行高、間距等樣式,以及去除頁面的默認邊距、頁眉頁腳等無關元素:
@media print { @page { size: A4; margin: 0 1cm; } *, *:before, *:after { box-sizing: border-box; } body { margin: 0; padding: 2cm; line-height: 1.6; font-size: 16pt; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } img { max-width: 100%; height: auto; } a[href]:after { content: " (" attr(href) ")"; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } pre { white-space: pre-wrap; } .page { page-break-after: always; } }
以上代碼會將所有元素的盒模型設置為border-box,去除默認邊距和頁眉頁腳,設置2cm的頁面內邊距、1.6倍行高和16pt字號。其中,h1~h6元素使用page-break-after屬性設置避免分頁,img元素設置自適應寬度,超鏈接元素末尾添加鏈接地址,pre和blockquote元素添加border樣式避免打印內容被截斷,.page元素設置分頁。
最后,我們需要將打印按鈕添加到頁面上,用于觸發瀏覽器的打印功能:
<button onclick="window.print()">打印</button>
現在,我們就可以愉快地進行打印了。通過以上設置,我們可以成功地將網頁內容規范地打印成A4紙的格式,從而使得打印輸出更加方便和美觀。