Làm cách nào để in trang web CSS?

Question

Các trang web bán vé làm điều này thường xuyên (nghĩ rằng. thẻ lên máy bay, vé vào cửa, bằng chứng mua hàng, hóa đơn, v.v.), nhưng đó không phải là tiêu chuẩn cho nội dung hàng ngày, điều này thật đáng tiếc vì người dùng cố gắng cung cấp nội dung ngoại tuyến nhiều hơn bạn nghĩ (tôi. e. trước chuyến bay, như một tài liệu tham khảo có thể in được, v.v.)

Nội dung chính Show

Bước 1. Truy vấn phương tiện CSS để in
Bước 2. Ẩn dư thừa
Bước 3. Tùy chỉnh lề trang
Bước 4. Xử lý liên kết
Làm cách nào để in trang web bằng CSS?
Làm cách nào để viết CSS để in?
Làm cách nào để kiểm tra CSS in?
Tệp CSS in là gì?

Hãy xem nhanh cách chúng ta có thể viết truy vấn phương tiện cho nội dung có thể in và xuất được. Thật dễ dàng, sẽ chỉ mất một phút. Chúng tôi sẽ sử dụng bảng phím tắt Adobe XD này từ blog/trang web của tôi làm ví dụ

Đây là những gì bài báo trông giống như trên web

Và đây là hình thức dưới dạng PDF, trước khi tối ưu hóa CSS

FYI. bạn có thể in từ web bằng phím tắt Ctrl/cmd+P

Bước 1. Truy vấn phương tiện CSS để in

Trước hết, chúng tôi xác định truy vấn phương tiện

@media print {
    /* styles here */
}

Giả sử rằng điều này xuất hiện ở cuối biểu định kiểu CSS của bạn, hầu hết các kiểu trong truy vấn phương tiện để in sẽ ghi đè lên bất kỳ thứ gì khác tồn tại một cách dễ dàng

Nếu không, hãy thử sử dụng quy tắc !important

Bước 2. Ẩn dư thừa

Khi tải các trang web dưới dạng PDF, người dùng không cần

phần tử giao diện người dùng
Đầu trang/chân trang
Nội dung thanh bên
Biểu mẫu và CTA
Vân vân

Chúng ta cần ẩn những phần tử đó bằng cách sử dụng display:none;

Mã của chúng tôi sau đó trở thành (làm ví dụ)

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

Ví dụ của chúng tôi sau đó trông như thế này

Không tệ, nhưng có một số khoảng cách không mong muốn ở trên cùng

Chúng tôi sẽ muốn "đặt lại" khoảng cách này, không nhất thiết phải có trên thẻ <body>. Trong trường hợp của tôi, đó là một margin: trên phần tử

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

0, do đó

@media print {
  header, footer, aside, form, … {
    display: none;
  }
  article {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}

Bước 3. Tùy chỉnh lề trang

Các trình duyệt thực sự khá hiệu quả khi xác định lại lề trang và sắp xếp nội dung. Điều đó đang được nói, bạn có thể muốn xác định lợi nhuận của riêng mình, điều này khá dễ thực hiện. Chỉ cần nhớ sử dụng

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

1 thay vì

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

2

Mã của chúng tôi sau đó trở thành

@media print {
  header, footer, aside, form, … {
    display: none;
  }
  article {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}
@page {
  margin: 2cm;
}

Như bạn có thể thấy từ ví dụ mã ở trên, lề được xác định bằng cách sử dụng quy tắc

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

3, không phải bằng cách thêm lề vào phần tử <body>, vì <body> chỉ tồn tại một lần và kéo dài theo chiều cao của tất cả các trang. Với khai báo này, chúng tôi thậm chí có thể xác định các lề riêng biệt cho các trang đầu tiên, cuối cùng, bên trái và bên phải (trong trường hợp có thể xuất kéo dài hơn một trang), ví dụ:

________số 8_______

Bước 4. Xử lý liên kết

Các liên kết vẫn có thể nhấp được trong tệp PDF nhưng đối với những người dùng có thể muốn giữ nội dung trên thực tế, chúng tôi sẽ cần nghĩ ra thứ gì đó sáng tạo hơn. Chính Ben Frain đã khai sáng cho tôi thủ thuật cực kỳ đơn giản và cực hay này

@media print {
  a:after {
    content: "("attr(href)")";
  }
}

Điều này làm, lấy giá trị của thuộc tính

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

6 và hiển thị nó trong ngoặc sau liên kết, như thế này

thủ thuật hay (https. // benfrain. com/create-print-styles-using-css3-media-queries)

———

Tôi sẽ để lại cho bạn một lời khuyên cuối cùng này. để lại một cái gì đó trong phiên bản có thể in được có tên của bạn và bất kỳ thông tin bản quyền nào được yêu cầu

Bạn có thể sử dụng CSS để thay đổi giao diện trang web của mình khi được in trên giấy. Bạn có thể chỉ định một phông chữ cho phiên bản màn hình và một phông chữ khác cho phiên bản in

Bạn đã thấy quy tắc @media trong các chương trước. Quy tắc này cho phép bạn chỉ định kiểu khác nhau cho các phương tiện khác nhau. Vì vậy, bạn có thể xác định các quy tắc khác nhau cho màn hình và máy in

Ví dụ dưới đây chỉ định các họ phông chữ khác nhau cho màn hình và bản in. CSS tiếp theo sử dụng cùng một cỡ chữ cho cả màn hình cũng như máy in

Nếu bạn đang xác định biểu định kiểu của mình trong một tệp riêng biệt, thì bạn cũng có thể sử dụng thuộc tính phương tiện khi liên kết với biểu định kiểu bên ngoài -

Làm cách nào để in trang web bằng CSS?

Trong Chrome, mở Công cụ dành cho nhà phát triển và chọn Công cụ khác, sau đó Kết xuất từ menu biểu tượng ba chấm ở trên cùng bên phải. Thay đổi Phương tiện giả lập CSS để in ở cuối bảng điều khiển đó .

Làm cách nào để viết CSS để in?

Bạn có thể sử dụng CSS để thay đổi giao diện của trang web khi được in trên giấy. Bạn có thể chỉ định một phông chữ cho phiên bản màn hình và một phông chữ khác cho phiên bản in. Bạn đã thấy @quy tắc phương tiện trong các chương trước. Quy tắc này cho phép bạn chỉ định kiểu khác nhau cho các phương tiện khác nhau.

Làm cách nào để kiểm tra CSS in?

css. Mở trình duyệt và làm mới trang. Nhấp chuột phải và chọn In > Xem trước bản in (Firefox, nhưng thực sự là bất kỳ trình duyệt nào) .

Mở Menu lệnh. ( tl;dr Cmd+Shift+P (Mac) hoặc Ctrl+Shift+P (Windows, Linux))

Bắt đầu nhập Rendering và chọn Show Rendering

Đối với trình đơn thả xuống Giả lập Phương tiện CSS, hãy chọn in

Tệp CSS in là gì?

Tệp, bản in. css là biểu định kiểu in và lệnh media="print" có nghĩa là tệp CSS này chỉ được gọi khi các trang web được in. (Có nhiều phương tiện khác nhau mà bạn có thể sử dụng cho biểu định kiểu, chẳng hạn như cho thiết bị cầm tay, TV, trình chiếu, v.v.

programming css