有關使用CSS從瀏覽器打印到打印機或PDF文檔的一些技巧
即使我們越來越注視屏幕,但打印仍然是一回事。
即使有博客文章。我記得2009年的某個時候,我遇到一個人,告訴我他在我發布的每篇博客文章上都打印他的私人助理(是的,我呆呆地呆了片刻。絕對出乎意料。
我研究打印的主要用例通常是打印為PDF。我可能會在瀏覽器中創建一些內容,並希望將其提供為PDF。
瀏覽器使此操作非常容易,Chrome在嘗試打印文檔且打印機不可用時將Chrome默認設置為“保存”,並且Safari在菜單欄中有一個專用按鈕:
打印CSS
打印時可能要執行的一些常見操作是隱藏文檔的某些部分,例如頁腳,頁眉中的某些內容,側邊欄。
也許您想使用其他字體進行打印,這是完全合法的。
如果要打印的CSS較大,則最好使用單獨的文件。瀏覽器僅在打印時下載:
<link rel="stylesheet"
src="print.css"
type="text/css"
media="print" />
CSS @media打印
先前方法的替代方法是媒體查詢。您在此塊中添加的任何內容:
@media print {
/* ... */
}
僅適用於打印的文檔。
鏈接
由於鏈接,HTML很棒。有充分的理由將其稱為“超文本”。在打印時,根據內容,我們可能會丟失很多信息。
CSS提供了一種解決此問題的好方法,方法是編輯內容,將鏈接附加在<a>
標記文本,使用:
@media print {
a[href*='//']:after {
content:" (" attr(href) ") ";
color: $primary;
}
}
我瞄準a[href*='//']
僅對外部鏈接執行此操作。我可能具有用於導航和內部索引編制目的的內部鏈接,這在我的大多數用例中都是沒有用的。如果您還希望打印內部鏈接,請執行以下操作:
@media print {
a:after {
content:" (" attr(href) ") ";
color: $primary;
}
}
頁邊距
您可以在每頁上添加頁邊距。cm
或者in
是用於紙張打印的好單元。
@page {
margin-top: 2cm;
margin-bottom: 2cm;
margin-left: 2cm;
margin-right: 2cm;
}
@page
也可以用於僅定位首頁@page :first
,或僅使用@page :left
和@page: right
。
分頁符
您可能想在某些元素之後或之前添加分頁符。使用page-break-after
和page-break-before
:
.book-date {
page-break-after: always;
}
.post-content {
page-break-before: always;
}
那些屬性接受各種各樣的價值觀。
避免在中間破壞圖像
我在Firefox上遇到過這種情況:默認情況下,圖像在中間被剪切,並在下一頁繼續。它也可能發生在文本上。
使用
p {
page-break-inside: avoid;
}
並將您的圖像包裝在p
標籤。指定目標img
直接在我的測試中不起作用。
這也適用於其他內容,而不僅僅是圖像。如果發現不想要的東西被割掉,請使用此屬性。
PDF尺寸
儘管圖像的總大小並不大,但嘗試通過Chrome嘗試使用圖像打印400頁以上的PDF時最初會生成100MB +的文件。
我嘗試使用Firefox和Safari,並且大小小於10MB。
經過幾次實驗,結果發現Chrome有3種將HTML打印為PDF的方法:
- ❌不要使用系統對話打印它
- ❌不要單擊“在預覽中打開PDF”
- ✅而是點擊“ Chrome打印”對話框中出現的“保存”按鈕
這樣生成PDF的速度比其他兩種方法快得多,並且大小要小得多。
調試打印演示
Chrome DevTools提供了模擬打印佈局的方法:
面板打開後,將渲染仿真更改為print
:
免費下載我的CSS手冊
更多CSS教程:
- Flexbox指南
- CSS網格教程
- CSS變量(自定義屬性)
- PostCSS簡介
- CSS保證金屬性
- 如何使用CSS將元素居中
- CSS系統字體
- 如何使用樣式打印HTML
- CSS過渡入門指南
- CSS動畫教程
- CSS簡介
- CSS指南
- 如何使用PurgeCSS和PostCSS設置Tailwind
- 尾風備忘單
- 如何使用CSS連續旋轉圖像
- 使用CSS使表響應
- 如何通過二等分來調試CSS
- CSS選擇器
- CSS級聯
- CSS特異性
- CSS屬性選擇器
- CSS顏色
- CSS單位
- CSS url()
- CSS排版
- CSS Box模型
- CSS位置屬性
- CSS媒體查詢和響應式設計
- CSS功能查詢
- CSS轉換
- 如何使用CSS設置列表樣式
- CSS供應商前綴
- CSS繼承
- CSS偽類
- CSS偽元素
- 用CSS樣式化HTML表
- CSS Display屬性
- CSS calc()函數
- CSS邊框
- 使用@import導入CSS文件
- CSS錯誤處理
- CSS過濾器
- CSS Box大小
- CSS背景
- CSS註釋
- CSS字體
- CSS填充
- CSS float屬性和清除
- CSS規範化
- CSS z-index屬性
- 如何使用CSS禁用文本選擇
- 如何使用CSS將項目放在其容器的底部
- 如何使用CSS反轉顏色
- CSS中的響應式前置標籤
- 自適應YouTube視頻嵌入
- 響應式設計的良好CSS斷點值是多少?
- 如何在Flexbox中對齊中心