Xử lý khi in với css
1. Chèn file css
* Cách nạp css theo dạng file:
<link rel="stylesheet" href="main.css" />
* Css phần giao diện
<link rel="stylesheet" media="print" href="print.css" />
* Css phần khi in ra giấy (thêm media="print")
* Cách chèn lệnh css trực tiếp vào file html
@media screen {
...
}
** Mặc định là screen
/* main.css */
body {
margin: 2em;
color: #fff;
background-color: #000;
}
@page {
size: A4;
margin: 0;
}
/* override styles when printing */
@media print {
body {
margin: 0;
color: #000;
background-color: #fff;
}
}
2. Lệnh @page trong css
* Định dạng với 1 trang in, thiết lập page size.
Khi nhấn nút preview xem trước khi in, các lệnh @page sẽ chạy
Các tùy chọn:
auto: sử dụng giá trị này, kích cỡ và hướng của Page Box sẽ được thiết lập tự động phục thuộc theo nội dung và context của phần tử. Tức là tùy theo Target Sheet – chẳng hạn như bạn in trên khổ giấy A4 thì khổ giấy đó là Target Sheet.
landscape: Page Box sẽ có cùng kích cỡ với Target, và các cạnh dài hơn sẽ nằm ngang.
portrait: Page Box sẽ có cùng kích cỡ với Target, và các cạnh ngắn hơn sẽ nằm ngang.
length: sử dụng giá trị length cho thuộc tính size để tạo một Page Box tuyệt đối. Tức là, nếu bất kỳ giá trị nào được xác định, nó sẽ thiết lập cho cả độ rộng và chiều cao của Page Box. Giá trị % sẽ không được chấp nhận trong thuộc tính size.
rộng cao: quy định độ rộng, cao
@page {
size: A4;
margin: 0;
}.
@page {
size:8.5in 11in;
margin: 2cm
}
@page {
size: auto;
margin: 0;
}
@page { size : portrait; }
@page rotated { size : landscape; }
table { page : rotated; }
@page {
size: auto;
margin: 15mm 10mm 15mm 10mm;
padding: 10mm 10mm 10mm 10mm;
}
* Hide date print html
* Tham khảo:
https://benfrain.com/create-print-styles-using-css3-media-queries/
https://www.sitepoint.com/css-printer-friendly-pages/
https://www.w3.org/TR/1998/REC-CSS2-19980512/page.html
Mục liên quan:
