Bạn có một nội dung được thiết kế và soạn thảo để chuẩn bị sẵn cho việc in ấn. Tuy nhiên, khi ngươi dùng thao tác in thì trình duyệt web mặc định sẽ in tất cả các nội dung đang hiện thị trên website khiến cho mục đích thiết kế trang in ban đầu của bạn không thể thực hiện đúng được.
Vì vậy, lúc này bạn sẽ phải sử dụng CSS @media print để thiết lập điều kiện cho trang in. Mà cụ thể ở đây là dùng để ẩn những thành phần mà bạn không muốn hiển thị trên trang chỉ, chỉ để lại phần nội dung mà bạn muốn in.
Mình lấy ví dụ trang in này: https://www.chuyengia.vip/2023/09/no-nho.html
Tại trang in này, mình đã thiết lập một vùng in với thẻ div có id="printMe". Và mọi thứ mình cần in sẽ đặt trọn trong thẻ div này.
Sau đó dùng CSS @media print để loại bỏ các thành phần thừa trong trang in như sau:
@media print{
#hamburger-sticky, .search-container-overlay, .entry-title, #footer-ads #footer-wrapper, .label-container, #hamburger-pro-container, #footer-wrapper, .backTop, #sidebar-container, #main-ads-below {
display: none !important;
}
}(code-box)
Ngoài việc ẩn đi những thứ không cần thiết, bạn còn có thể thiết lập vị trí của trang in thông qua việc set thêm thuộc tính Position: fixed; với 4 thuộc tính đi kèm là top, bottom, left, right để định vị thẻ div.#printMe. Ví dụ:
#printMe {
position: fixed;
top: 20px;
left: 10px;
}(code-box)
Chúc bạn thành công!
